利用脚手架创建vue项目以及vue项目的基本使用

1.创建项目

（1）打开命令提示符，并进入文件夹

（想在哪个文件夹下创建项目就进入哪个文件夹）

（2）输入vue create 项目名称

 

(3)选择vue版本和配置

这里是选择用vue 2还是vue 3还是手工选择，这里我选择的是最后一个， 因为前两个都有eslint，会检查语法风格，对初学者不友好。按enter键后，进入手工选择。

按空格是切换选还是不选，按自己需求来选择。

 按enter进入下一步，选择vue版本。

 按enter进入下一步，进行配置（根据上述步骤选择的不同，这一步各不相同）

（4）建立项目

 通常需要等待一下，需要下载一些包，下图为创建完成的亚子：

2.项目基本结构

 打开刚刚创建的文件夹，可以看到如下所示的结构:

 (1) package.json配置文件

这里是项目的一些基本的信息，包括项目名称、项目版本和是否公开，相关命令和依赖。

 （2）src/main.js

程序的入口文件，在这里创建了vue对象。vue是模块化开发，可以看到在文件的上方import了几个模块。

（3） src/App.vue

是vue提供的一个根组件，template中的内容相当于html中的body中的内容，会显示到页面上，style是样式，还可以有script。

（4）src/components文件夹 

在vue中，我们可以自定义一些组件，相当于自定义一些标签，在这个文件夹下放到就是这些自定义的组件。组件结构和App.vue相同，定义 后，可以在App.js中引入：

先在script中导入，导入的名称即可以在template中使用的组件名，然后在components中注册，即可以使用。

（5）启动项目

可以在命令提示符中进入项目文件夹，输入npm run serve启动项目，也可以在VS Code中打开：

输入npm run serve启动项目：

 

3.使用 

（1）结合element ui的使用

安装element ui :

在终端输入npm install element-ui -S:(-S可以不加，install可以简写为i)

 下载的包会在node_modules文件夹下。在传输项目时，可以不用传node_modules文件夹，执行npm install后会自动下载，因为所需的包在package.json中都已经有记录了。

引入element-ui，因为需要在多个地方使用，所以在main.js中引入：

在各个页面即可使用element-ui组件。

（2）axios网络请求

安装命令：npm install axios

在main.js中引入，还可以为其路径加一个前缀：

使用：

 （3）VueRouter

管理单页面项目(比如网易云的网页版)中组件的切换。有两个版本，3和4,3对应vue 2 , 4对应vue 3。

安装：npm install vue-router@3

使用步骤：

1.写组件

2.新建一个router.vue,来写路径与组件的对应关系，并导出。

3.在main.js中注册。

4.在App.vue中使用

router.vue:

 main.js：

使用：

 当点击router-link时，会渲染对应的组件，router-link本质上是使用a标签来实现的。<router-view></router-view>相当于占位符，组件会被渲染到这个标签中。

（4）vuex

管理共享数据，可以让多个组件共享、修改。

安装(基于vue2）：npm install vuex@3

使用步骤如下所示：

1.在src下建store文件夹，在文件加下创建index.vue文件，将数据和方法写在里面并且导出。

2.在main.js中导入vuex。

3.使用。

store.vue:

state中是共享的数据，mutations中放的是修改数据的方法。 

main.js:

使用: