vue脚手架安装使用手册（新增升级vue3.0）

使用vue-cli来创建一个基于 webpack 模板的新项目

创建

cmd利用cd指令进入到保存项目的文件夹下，然后输入命令：

vue init webpack 你的项目名

 

如图标记处输入项目名称（随便命名，但不要是中文），*也可以直接把项目名写在命令后面，其它的看自己需要自行考虑yes还是no，每项的介绍如下：

Project name :项目名称 注意：这里不能使用大写

Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。

Author：作者，如果你有配置git的作者，他会读取。

Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。

我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。

setup unit tests with Karma + Mocha? 是否需要安装单元测试工具

Karma+Mocha，我们这里不需要，所以输入n。

Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为

模拟测试，我们这里不需要，所以输入n。

这里就选择npm安装 然后等待下载。。。。

实际开发中根据需要配置。

 

 

 

创建完成后文件夹内会有如下些文件

 

安装项目所需要的依赖

进入新建的项目文件夹下，就是上头有一些文件的里面，输入命令

cnpm install

因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。

 

运行项目

 

cnpm run dev

 

 

退出，Ctrl + c >> y >> 回车

 

出现如图画面，在浏览器中输入网址http://localhost:8080 会出现如下图

 

注意：如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用了（默认服务启动的是本地的8080端口），可以通过修改一下配置文件 config>index.js里的端口号

 

网上有的说执行cnpm run dev后，浏览器会自动默认打开一个“欢迎页面”，但是我的没有，原因应该如下

目录中config下的index.js文件中，将autoOpenBrowser的值是false，改为true就能自动打开了

 

后续其它步骤—打包上线

自己的项目文件都需要放到 src 文件夹下

 

项目开发完成之后，可以输入 npm run build 来进行打包工作：

npm run build

 

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看

 

项目上线时，只需要将 dist 文件夹放到服务器就行了。

 

附：部分文件功能介绍（网上找的图片，侵删）

 

vue2.0升级3.0（4.0）

一.vue cli2升级到vue cli3（4.0）

 

1.先升级npm的版本

 

npm install -g npm

 

2.再卸载之前的vue cli 2.9.6

 

npm uninstall -g @vue/cli

 

3.下载最新的vue cli版本

 

npm install -g @vue/cli

 

二.vue3.0(4.0)版本创建项目

 

1、vue create myproject

2、默认选择default方式即可

 

vue cli2.0和vue cli3.0的区别

 

1.打包方式： 2.0是通过:npm run dev 3.0是：npm run serve 至于为什么会变，看一下package.json就知道了

2.文件夹目录： 3.0取消掉了config目录、build目录、static目录 ,还有最重要的一点，3.0的安装项目时自动下载node-model vue.config.js也没了，需要手动添加。

3.创建项目方式： 3.0的安装：vue create 3.0project；

                              2.0的安装：vue init webpack 2.0project(项目名)    (据我所知有五个，这个是我常用的)

 

 

 

也可以使用

vue ui

来进行可视化页面配置，良心，是英文不好的兄弟们的福音，只需点点点