Vue 脚手架 4.1.1 项目搭建 教程
1.node npm环境初始化
1.1 下载
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运行环境
点击右上角 运行
运行成功
