快速搭建一个vue项目

如何构建一个VUE项目？

1.环境搭建

一定要以管理员身份启动cmd，后面的操作都是在管理员启动的黑窗口进行

• node.js
  

可以在安装node.js之后再使用 npm install cnpm -g 安装淘宝镜像加速器，这个在下载一些模块会比原生npm快

• vue-cli

（npm install -g vue-cli ）一个快速构建vue项目的脚手架

2.初始化项目

• 在cmd窗口将地址换至我们创建vue项目的文件夹内

• 创建一个基于webpack模板的vue应用程序

  • 这是在线初始化vue项目，由于我的网络一直下载超时，所以使用了离线初始化

    vue init webpack vuedemo(项目名)

  • 在github上下载webpack的压缩包，解压缩到C:\Users\xxx\.vue-templates（如果没有.vue-templates文件夹，直接创建一个就行），将解压缩后的文件夹名字改为webpack

  

  再使用如下命令进行创建项目

  vue init webpack vuedemo --offline

  直接一路No下来就行了

• 之后就可以在该文件夹内看到自己创建的vue项目

• 然后在cmd窗口切换到创建的项目内（可以打开package.json查看一个webpack的版本号，因为有时候自动版本号过高，后面会出现了一系列问题，这里推荐"webpack": “^3.6.0”）

• 先安装需要的插件

  npm install vue-router --save-dev

  npm install element-ui -S

  npm install

  npm install --save sass-loader@7.3.1

  cnpm install --save node-sass@4.14.1(这个我用npm一直失败，用cnpm一下就成功了！！！)

推荐的部分插件的版本号：

"sass-loader": "^7.3.1",
"node-css" : "^4.14.1",
"vue-router": "^3.4.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",

如果下载插件时出现异常，npm会给出提示信息，按照它的命令执行即可，如果下载超时，可以使用cnpm

3.启动项目

npm run dev

执行此命令即可启动该vue项目

然后根据提示的端口信息进入：

27285.png" alt=“image-20210109101127285” style=“zoom:80%;” />