vue——vue项目创建、vue项目目录结构、vue cli的运行说明、es6导入导出语法、vue-router使用、vue项目使用bootstrap和jQuery、element-ui

系列文章目录

`

一、vue项目创建

创建一个vue项目之前，我们需要知道纯前端作为一个项目时需要node.js的支持，所以需要先安装一个node.js

1.node.js的安装

node.js中文官网
下载的时候以长期支持版本为主，长期支持版本随时间会变更，此图只能参考

安装时最好使用msi，这样安装完毕后会自动配置node和npm环境变量

2.vue cli的安装

vue cli官方网
以官方网安装为主，此文章安装方式再后续时间段可能不是主流安装了，安装之前请阅读下面的引用部分

关于旧版本 引用自官方文档
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

vue cli安装指令 本文以window为主
使用npm安装很慢的话，可以考虑cnpm

npm install -g cnpm ## -g指在全局环境中安装，如果只想在某个python环境中安装请去掉

npm install -g @vue/cli ##使用cnpm安装 cnpm install -g @vue/cli

安装时可能会失败，或者报一些小错误
安装失败可以换源解决：

npm --registry https://registry.npm.taobao.org install @vue/cli #安装时临时换源
npm config set registry https://registry.npm.taobao.org ##此为永久更换源

针对于错误可以先查看vue版本，能查看就可以不管那些小错误，不能是按照提示输入修复指令即可

vue --version

3.vue项目的正式创建

3.1 指令方式创建vue项目

使用cmd进入创建文件的目录中

(jango2) D:\>vue create vuecli_test ## 路径>vue create 项目名称 
该指令会在该路径下创建项目名称的文件夹在其中从远端服务器上拉取纯净vue项目

使用指令之后需要选择vue项目的配置
操作时使用方向键和回车控制

此处操作时使用方向键切换选项
空格键是选项勾选
回车键是进入下一步

选择vue版本

此图为是否使用历史模式来记录路由（此项会产生历史路由存档，方便回退之前的路由版本）作为上线项目必选，其余可以不选来节省资源

项目依赖的保存类型，推荐使用package.json

是否将刚才的配置保存下来，方便后续快捷创建项目

出现以下情况就是项目创建成功

按顺序输入蓝色指令即可运行项目

3.2使用vuecli提供的图形化界面创建项目

cmd中输入指令

vue ui

图形界面启动完毕会自动使用浏览器打开，如果没有打开，可以使用红框处的url来打开，此时不能关闭cmd终端

图形化界面如下

创建流程和之前的指令创建类似

正常开发需要配置git仓库，此处演示没有配置，包管理器可以按需要选择，推荐npm

二、vue项目目录结构