vue 实现命令行界面_cmd命令行创建vue框架

cmd命令行创建vue框架

注意：前提条件是先安装好node.js，然后配置好环境变量。

这里介绍两个版本的创建；

一、配置版本1.0的vue-cli框架：

1、配置环境变量NODE_PATH：D:\S3S155\node.js\node_global\node_modules：

2、添加环境变量path：D:\S3S155\node.js\node_global：

3、打开cmd命令台

全局安装vue-cli：npm install vue -g：

4、全局安装vue-cli：npm install vue-cli -g：

5、输入测试是否安装vue-cli成功：vue - V：

6、随便创建一个文件夹，然后输入命令创建项目：vue init webpack vue01：

7、填写项目的具体信息，按回车就会自动帮你下载项目相关的东西：

8、回到你项目的目录中，你会看到会有一个vue01的目录：

9、创建成功后，输入cd vue01回到项目中，然后输入npm run dev命令运行：

10、运行开发模式后：

11、浏览器打开：

12、回到vue01项目中，有很多已下载的东西：

13、打开package.json文件：

14、比如运行打包模式：npm run build：

15、回到vue01目录中，你会看到目录中会多出一个dist文件，这个就是你将来要发给客户的项目，但是导出后的项目的路径会有所改变，运行起来会失效：

16、点开dist文件，用浏览器打开：

17、用超级笔记本打开index.html文件，你会发现那些link进来的文件的路径多出一个"/"：

18、把“/”去掉后重新运行就成功了：

19、或者你可以改掉config文件里的inde.js的配置：

20、重新打包再运行：

21、再重新打开dist文件中的index.html文件：

22、运行成功：

二、配置版本2.0的vue-cli框架：

1、使用vue create vue04命令创建项目：

2、回到node.js目录look：

3、回到cmd后台命令台，尽管按回车就行：

4、用浏览器运行后：

5、回到vue03项目目录中观察项目结构：

6、项目少了一些模块和依赖，但操作差不多，

打开package.json文件，运行打包模式：

7、运行开发模式：

8、vue03项目会多出dist文件，这个就是打包出来的文件：

9、一样，打开它，直接运行index.html是没有效果，因为路径改变了，解决办法就是新增一个vue.config.js文件，改变配置：

10、然后用超级笔记本打开，写入代码：

11、然后重新打包，再运行就成功了：

12、将inde.html拖进来运行：

13、运行成功：