不依赖vue-cli脚手架创建vue项目

我们一般创建vue项目都是通过vue-cli脚手架去创建，这次我尝试了通过文档完成所有项目配置包括webpack、ant-design-vue、vue-router、vuex等

项目源码： https://github.com/wzp123321/myVueJSProByMySelf.git

1.新建项目

2.使用vscode打开项目

3.初始化

4.安装基本的 npm 包

5.创建文件夹以及文件

6.配置webpack.config.js

在这之前先安装一些依赖

模板解析依赖：

样式依赖:

css-loader: https://webpack.docschina.org/loaders/css-loader/

文件加载依赖

解析es6语法依赖: https://github.com/babel/babel-loader

这是一个webpack插件，可简化HTML文件的创建以服务您的webpack捆绑软件

现在就可以配置webpack.config.js，如果有什么不清楚的可以参考官网 https://webpack.docschina.org/configuration/

7.安装解析依赖 https://github.com/webpack/webpack-dev-server

8.修改package.json文件

9.配置babel,创建.babelrc文件

修改webpack.config.js

如果编译时报错的话可能是因为你没有安装依赖:

10.主要文件：

app.vue：

index.js:

html文件：

Vue项目文件夹大致参考

1.混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixins文件夹下可以写各种调用ajax请求方法的方法，然后在需要调用这些方法请求数据的文件中：

这里的getCourseList文件中有请求需要的参数以及请求完成之后获取的数据 直接在文件类似this.getAllDemoClass()就能调用方法

2.components通用组件存放文件夹：

在这个文件夹下封装了项目需要的组件 然后在components下的index.js中向外暴露即可 然后在使用组件的文件中引用components即可

后续：

1.引入ant-design-vue：

具体引入 *** 作可见官网 https://vue.ant.design/docs/vue/introduce-cn/

2.引入Vue Router https://router.vuejs.org/zh/installation.html

路由配置文件：router/index.js

3.引入vuex

新建store/index.js

news/index.vue

4.页面顶部进度条插件Nprogress

使用：

日常在开发中总是会遇到各种奇怪的需求，

最近在开发一个多人合作的项目时变遇到一个奇怪的需求，

对方之前开发了一个react组件，要求在这期迭代中嵌入到vue项目中。

npm i -S vuera

npm install --save react react-dom

这个时候发现第一个问题：

不难发现，这是vue项目中未jsx文件格式的问题所导致

解决办法：

编辑webpack.base.conf.js，加入对jsx的支持

这个时候第二个问题出现了：

原因：

.babelrc文件中默认引入了transform-vue-jsx，此插件将jsx转义成h function的形式供vue调用。

解决办法：

npm install --save-dev babel-plugin-transform-react-jsx

并且在.babelrc文件中

用transform-react-jsx替换transform-vue-jsx

至此，我们便完成了在vue项目中引入react组件的目的

效果：

npm i -S vuera

npm install --save vue

---