c++项目实例_Vue 2和Vue 3(CLI脚手架)创建项目得一些基础知识——Vue学习之路

项目的创建

使用vue开发项目也有一段时间了，由于项目需要，目前会同时使用vue-cli和@vue/cli两种版本进行项目创建。

由于@vue/cli是新版本了，也就是vue 3，vue-cli是旧版本了，也就是vue 2。

所以两个版本有不同的创建项目的命令。

vue 2

vue init webpack demo

vue 3

vue create demo

由于目前我硬盘上安装的是vue 3，所以使用vue init会出现

Command vue init requires a global addon to be installed.Please run npm install -g @vue/cli-init and try again.

的提示。

然后，按照提示安装完这个依赖包，我们会发现自己电脑的如下目录

C:甥敳獲苏超AppDataRoamingpmode_modules@vuecli-init

多了这个内容。

当然，之后，我们就可以使用两种模式创建vue项目了。我同时使用了vue 2和vue 3创建了一个项目。下面分别介绍下

vue 2项目的目录结构(使用了vue-router)

发现需要关注的目录为以下五个

index.html(项目根目录)

main.js(src目录下)

App.vue(src目录下)

index.js(src目录下router文件夹下的)

HelloWorld.vue(src目录下components文件夹下的)

index.html这个是最终浏览器去读取的文件，也是我们关注的第一个文件。毕竟浏览器只能识别出来html文件，并不能识别vue文件。

当然vue构建项目的原理是自底向上，个人理解是，正如我们使用模板创建出来的html文件是空的，然后依赖js文件把vue文件里的内容注入到html文件里。

index.html

于是，index.html除了固定的html结构外需要关注的就是上面的一行内容了。

然后我们看main.js文件。

import Vue from 'vue'import App from './App'import router from './router'new Vue({ el: '#app', router, components: { App }, template: ''})

这个文件有两个部分需要关注

import内容和new vue()实例。

import的作用是引入项目写的其他文件和依赖包(从node_modules文件夹下)

对于

import Vue from 'vue';

其实是简写了，全称为

import Vue from "../node_modules/vue/dist/vue.js";

这句话其实就是引入vue.js文件了。

对于import App from './App';

其实是简写了，全称为

import App from './App.vue';

这句话其实就是引入App.vue文件了，这里省略了.vue扩展名。

下方的new vue()的内容就是指向App.vue文件了。

这里和之前的vue单文件写的vue实例是接近的。

vue项目文件

{{context}}

App.vue文件

这里用到了vue路由，也就是标签。

然后，我们需要跳到router文件夹下的index.js

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ]})

这里的路由使用了同样的import语法，引入vue.js和vue-router.文件js(从node_modules文件夹下)

然后就是通过路由引入HelloWorld组件，到了这里，就正式进入了项目开发

HelloWorld.vue

{{ msg }}

这个文件对应路由的指向文件，如果路由页面写有多个页面指向，就会有多个组件了。由于这个项目比较简单，就只有一个页面。

vue 2项目的目录结构(未使用vue-router)

不使用vue-router的情况，就少了src目录下router文件夹下的index.js

main.js如下：

import Vue from 'vue'import App from './App'new Vue({ el: '#app', components: { App }, template: ''})

区别就是少了一行

import HelloWorld from '@/components/HelloWorld'，

vue()实例里也少了router的声明。

App.vue文件

不使用vue-router的情况，就直接在app.vue里进行父子组件关联了。

综上所述，使用路由的情况是index.html到main.js到App.vue到router下的index.js，再到HelloWorld.vue。

不使用路由的情形是index.html到main.js到App.vue再到HelloWorld.vue。

组件的声明是靠各个vue文件互相关联的，使用vue-router的情况下，就是靠vue-router进行关联的。

相当于使用了vue-router的时候，他在app.vue和HelloWorld.vue之间插了一杠子。

vue 3的项目目录(未使用vue-router)

index.html(public文件夹)

这里的文件内容和vue 2一样，只是换了文件夹而已。

main.js(src目录下)

import Vue from 'vue'import App from './App.vue'new Vue({ render: h => h(App),}).$mount('#app')

这里import内容和vue2一致，就是下方的new vue()实例改用成了render方法。

App.vue(src目录下)

HelloWorld.vue(src目录下components文件夹下的)

{{ msg }}

这里使用了props父子组件传值。

这是vue 2和vue 3创建模板给我们带来的不同的知识点。

就到这吧，今天得赶回老家得火车了。。。