Vue cnpm vue - cli4.1.1 脚手架 项目初始化 实例（详细教程）

Vue 脚手架 4.1.1 项目搭建 教程

1.node npm环境初始化

1.1 下载

官网下载 node Js

1.2 安装

解压node js 安装包

配置 nodejs主目录到path

PATH
//配置 vue 指令
F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_global
PATH
//配置node 指令
F:\Web developer tool\node_js\node-v12.13.0-win-x64
PATH
F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_modules
cmd npm -v 输出 npm版本

cmd 管理员运行

cmd 设置 node缓存目录 启用 npm

node 主目录 打开 cmd
npm config set prefix “Node主目录\node_global”
npm config set cache “Node主目录\node_cache”

测试npm，安装个express：

npm install express -g
安装完毕后，就可以在F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_global\node_modules路径下看到express文件夹。

2.安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v 查看版本

3.vue-cli4.1.1 脚手架工具安装

vue cli 4.1.1安装

cnpm install -g @vue/cli
输入 vue -V 查看版本

 F:\Web developer tool\node_js\node-v12.13.0-win-x64>"node"  "F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_global\\node_modules\@vue\cli\bin\vue.js" -V
@vue/cli 4.1.1

4.vue-cli4.1.1 构建项目

找到项目文件路径
vue create vue-test //vue-test是项目名称 采用驼峰命名不能包含大写字母
选择 Manually select features手动配置
空格键选择需要组件

创建完 进入项目目录 执行 cnpm run serve

F:\Projects\Web storm Projects\vue-test>cnpm run serve
> wlnews@0.1.0 serve F:\Projects\Web storm Projects\wlnews
> vue-cli-service serve
 INFO  Starting development server...
  App running at:
  
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.104:8080/
  Note that the development build is not optimized.
  To create a production build, run npm run build.
  

还可以通过 vue ui 管理项目

vue ui 运行启动 管理页面

5. 使用webstorm创建配置Vue运行环境

点击右上角 运行

运行成功

Vue cli 版本共存