win7系统安装vue-cli脚手架【超详细】含webpack和vue-admin模板

VUE环境总共分为2步，搭建项目随意：

1、(必须)安装node环境

• 百度云下载安装：因为有时node官网下载网络不稳定,另外node版本v12往上win7可能安装不了，条件允许最好在官网下载

百度盘：https://pan.baidu.com/s/1XL8LRVoj_VTGCa7NotfwBQ
提取码：9avm

• 安装包无脑下一步确认就行了

 

• 安装完检查版本(cmd)

2、(必须)安装全局vue-cli

• 网络好的

npm install -g vue-cli

• 网络不好的，等了几分钟都没动过感觉，可以ctrl+c--y停掉先(并不影响大局)，安装cnpm先

npm install cnpm -g --registry=https://registry.npm.taobao.org

• 接下来同上的，只不过npm替换成cnpm

cnpm install -g vue-cli 

• 成功标志，至此vue环境安装完毕

3、(随便)创建webpack

• 创建一个文件夹，比如我的是，D:\vue-project

 

• cmd进入创建的文件夹

 

• 创建webpack项目【vue-cli】

vue init webpack demo

 

• Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters） 
• Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
• Author ()： ----作者，输入你的大名
• 接下来会让用户选择：其实直接回车就行了
• Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
• Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
• Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
• Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。但我还是选n，之后一路n
• Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择n回车
• Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择n回车
• 最后最终选npm，不知道yarn是什么的就不要选yarn

• 完了之后发现多一个文件夹，比如我的是demo,下面是结构

• cmd进入demo文件夹，安装npm（必须）（有时会有一堆警告不管它，除非出现红色err）

npm install

•  最后测试运行，如果一下命令出现红色err，再执行一遍，直到运行出现网址，停止就ctrl+c--y,

npm run dev 

 

• 输入网址：http://localhost:8080

4、(随便)创建vue-admin项目模板【element-ui前端框架】

• 下载，下面连接如果打不开，就去vue官网下载模板很简单，自行百度vue-admin

https://github.com/PanJiaChen/vue-admin-template

 

• 下载完解压，cmd进入项目里面，接下来就和第三步差不多了，运行（有时会有一堆警告不管它，除非出现红色err）

npm install

• 最后启动项目

npm run dev

 

• 基础模版界面，感受一波吧