vue脚手架项目的创建

1.安装vue-cli,npm,node,webpack,cnpm
　1)安装之前先检测一下是否已经安装

#vue
vue -V
#npm
npm -v
#node 
node -v
#webpack 
webpack -v
#cnpm
cnpm -v

．　2)安装node.js
．　3)安装npm和cnpm

#清除缓存
npm cache clean --force
#安装cnpm
$ npm install -g cnpm -- registry=https://registry.npm.taobao.org

． ４)安装vue-cli

cnpm install –g vue-cli

．５)安装webpack
　　a)在node.js的目录里新建node_cache和node_global文件夹
　　b)然后在当前目录打开cmd执行
　　　　npm config set cache “D:\Program Files\nodejs\node_cache”
　　　　npm config set prefix “D:\Program Files\nodejs\node_cache”
　　　　之后配置环境变量:在用户和系统的path里加入D:\Program Files\nodejs\node_cache
　　c)对于webpack4版本以上，需要分别单独安装webpack和webpack-cli

cnpm install webpack -g
#安装提示的webpack-cli版本
cnpm install webpack-cli@4.9.2 -g

．　d)检查版本号

C:\Users\admin>webpack -v
webpack: 5.73.0
webpack-cli: 4.9.2
webpack-dev-server not installed

2.在初始化项目之前还需要检查一下:C:\Users\admin.vue-templates目录下是否有webpack(离线初始化)

　1)webpack可以在之前的:D:\Program Files\nodejs\node_global\node_modules下找到,复制并移动到指定目录
　2)访问https://github.com/vuejs-templates/webpack下载
3.新建一个vue-cli项目,使用web-pack打包(在指定目录下cmd,并进行以下步骤)
　1)vue init webpack mydemo
　　mydemo是项目名称，这个名字自己随便取（不能有大写字母）。命令输入
后，会进入安装阶段，需要用户输入一些信息。
　2)Project name (vuetest)
　　项目名称，可以自己指定，也可直接回车，按照括号中默认名字。
　3)Project description (A Vue.js project)
　　项目描述，也可直接点击回车，使用默认名字。
　4)Author
　　作者，可以自己指定，也可直接回车。
　　接下来会让用户选择
　5)Runtime + Compiler: recommended for most users
　　运行加编译，既然已经说了推荐，就选它了
　6)Runtime-only: about 6KB lighter min+gzip, but templates (or
any Vue-specificHTML) are ONLY allowed in .vue files -
render functions are required elsewhere
　　仅运行时，已经有推荐了就选择第一个了5)创建后的项目目录结构如下.用编辑器打开项目，目录结构大致是这样的。
　7)Install vue-router? (Y/n)
　　是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入
“y”后回车即可。
　8)Use ESLint to lint your code? (Y/n)
　　是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码
风格的，并不会影响整体的运行。（代码规范检测工具）
　9)Setup unit tests with Karma + Mocha? (Y/n)
　　是否安装单元测试。
　10)Setup e2e tests with Nightwatch(Y/n)?
　　是否安装e2e测试。
4.vue-cli项目结构