001 使用vue-cli 搭建一个项目

第一步, 去node 官网下载安装包安装node.
第二步, 安装nrm

 npm install -g nrm

第三步, 使用nrm 管理软件源, 并把软件源切换成淘宝源

nrm ls 
nrm use taobao

第四步, 安装yarn (也可以不安装yarn , 使用npm 构建项目, 但是yarn 会快一些),

npm install -g yarn 

第 五步, 安装 vue-cli 和webpack

npm install webpack -g
npm install -g vue-cli

第六步, 使用vue-cli 构建项目
6.1 在硬盘中找一个合适的目录, 使用管理员权限打开powershell, 切换到刚才的那个目录,
比如 D:/goblog, 其中myblog 是项目名称, 这个名称不能包含大写字母, 不能包含空格等, 如果不符合规范, 会有提示。

vue init webpack  myblog

6.2 根据提示, 选择选项
Project name , 项目名称
Project description 项目的简介
Author 作者
Vue-router, vue的路由管理器, 建议安装
Eslint es 代码规范
unit tests 单元测试
e2e test 单元促成

最后选择使用 npm 还是yarn build 项目

QQ截图20200114220114.png

成功后, 会出现如下截图

项目启动成功后.png

进入到项目中, 启动开发环境

 cd myblog
npm run dev 

启动成功后, 命令行出现如下提示

8080成功.png

然后,在浏览器中输入 localhost:8080 可看到如下页面

启动成功的页面.png

要点总结

1 各种工具要安装齐全
2 使用vue 初始化项目时, 最好使用管理员权限
3 通过nrm 把软件源切换到 taobao源, 能显著的提高速度
4 如果在初始化过程中出现了如下提示, 说明你需要安装 windows 下的 c++ 和python环境,
安装命令如下

npm install --global --production windows-build-tools
npm install --global node-gyp
  npm 和 yarn  安装二选一即可。
yarn add  global --production windows-build-tools
yarn add  global node-gyp

缺乏环境.png

目录结构如下

build 目录是编译后的各种文件所在地
config 放各种配置文件
node_modules 是第三方依赖包 , 相当于php的vender目录
src 是日常编码的目录,
asset 是静态目录
components 是vue组件目录
router 是vue -route 目录

目录结构.png