（原）Vue 单文件组件安装 （创建vue-cli 项目）

更新于20200220

 

题外话：久违了我的博客园

正题：

 

1、准备工作，安装环境　　　　

　　1、安装node 官网下载安装即可  -- 配置环境变量

　　2、安装npm （基于node.js 包管理器）

　　3、安装cnpm (淘宝镜像，防止网速问题影响)

　　4、安装 vue-cli 脚手架    ----->   cnpm install -g @vue/cli

　　5、安装webpack 打包工具   ---->    cnpm install -g webpack

 

2、创建VUE 项目 

　　环境安装好后，将盘符切换到想要的盘符，切换到存放项目的目录

 

　　2-1 第一种方式： 利用 hbuilderX 编辑工具创建图形化管理界面

　　　　1、启动vue 创建项目的图形化管理界面   ---->   vue ui

　　　　2、在管理界面直接创建Vue 项目  》 包管理器选择为： npm  》 next  》 默认  》创建项目

　　　　3、关闭命令行和界面，即可重新进去开发项目

　　　　4、运行项目  ----->   在hbuilderX  》 运行  》运行到终端  》npm run serve

 

　　2-2 第二种方式： 利用doc ，vue-cli 脚手架搭建

　　　　1、vue init webpack projectname       

　　　　　 ps:  如果报错，可以在改项目的目录下重新安装脚手架   cnpm install -gd vue-cli

　　　　2、安装过程中会出现几个自定义选项

　　　　　

　　　　　

　　　　　

　　　　　

 

 　　　　   

　　　　　

 

 　　　　　

 

 　　　　　

 

 　　　　　

 

 

　　　　3、安装成功发布运行：cnpm run dev 

 

　　　　　

 

　　　　4、 如果上传到svn ，无需传node_modules；checkout 下来后，需要 cnpm install 运行即可

　　　　5、关于打包：cnpm run build ----> 获得dist 文件即可

　　　　　　Ps: 需要配置地址： config/index.js

 

 

 ___________________________________________________________________________________________________________________________________________________

絮絮叨叨

好啦，详细描述了安装vue 项目。我是经过了多次安装才摸索出来的，一开始安装时总会入坑，多试几次，就会熟练啦。

后续有什么相关知识再更新。

期待你的意见和见解。