vue脚手架---普通脚手架及路由的安装

Posted 2021-01-17 lixz

一、首先打开桌面win+r 打开命令窗口，cmd回车

二、全局安装vue,输入cnpm install vue-cli -g 回车(注意使用此命令是先要安装cnpm,没有安装的话也是在此页面输入：npm install -g cnpm --registry=http://reigstry.npm.taobao.org)回车即可

三、安装成功之创建一个空文件夹用于存放vue脚手架，打开文件夹所在根目录，按以下步骤操作：按住shift+右键点击，选中在此打开powerShell窗口（win10显示，其他显示在此打开命令窗口）---》输入vue init webpack-simple  项目名称 ----》一直回车，知道是否使用sass点击no,然后会出现三个指令，例如 1、  cd myapp  (此命令是打开myapp目录) 2、npm install （安装依赖文件）3、npm run dev（运行的指令）（此时脚手架已经搭建完成，即可去项目文件夹查看安装好的脚手架），按此命令才操作到第二步，然后打开项目文件夹所在根目录，打开命令窗口，（操作方法同第三步打开根目录窗口一样做即可，）输入第三个指令，即可运行文件（此指令创建的脚手架不包含路由，初级操作可以使用，当要使用路由时需要重新打开一个文件夹）

四、第三步安装的是普通使用脚手架，当要创建项目时就要使用带路由的脚手架，就要重新创建一个空的文件夹，然后按以下步骤操作：按住shift+右键点击，选中在此打开powerShell窗口（win10显示，其他显示在此打开命令窗口）---》输入vue init webpack  项目名称 ----》配置项按以下进行：1、project name按enter2、project description  按enter3、author  按enter4、vue build  按enter

五、install  vue-router  按y   6、use  eslink to lint your code?  按n   7、set up unit tests 按n   8、set up e2e tests with  nightwatch 按n       9、should we run `npm install` for you after the 

project has been created?  按第三个（no,i will  handel that myself）此刻配置就完成了

六、第五步完成之后，会出现三个指令例如 1、  cd myapp  (此命令是打开myapp目录) 2、npm install （安装依赖文件或者使用cnpm install）3、npm run dev（运行的指令）（此时脚手架已经搭建完成，即可去项目文件夹查看安装好的脚手架）按此命令才操作到第二步，然后打开项目文件夹所在根目录，打开命令窗口，（操作方法同第三步打开根目录窗口一样做即可，）输入第三个指令，即可运行文件,也可以通过输入npm start 运行文件