vue学习之——两种方式创建vue项目

最近学习，搭建vue项目，稀里糊涂的发现怎么不同的地方步骤还不一样，怎么有两种。研究了一下发现原来是vue_cli2.0语3.0版本导致的不同。

=========================

vue2.0的完整安装步骤

vue版本：2.2.2

vue有两种项目创建方式，一种是下载vue.js，通过script标签引入即可；另一种通过vue-cli构建基于webpack的项目，这种项目构建发布需要部署node环境，不能以文件的方式直接打开。

1.全局安装vue命令行工具
npm install -g vue-cli  （首次需要安装vue-cli 后面就不需要了）
2.创建一个基于webpack模板的新项目
vue init webpack my-project
注：跟“npm init”类似，输入一系列项目描述与配置，可以不用配置ESLint和单元测试框架。
3.项目创建完成后再安装基础模块
cd my-project
npm install
注：第一次安装了单元测试框架，结果安装到27%就安装不下去了，然后显示失败。第二次我把单元测试框架也去掉了，很快便安装完了。
4.安装完成后运行该项目即可。
npm run dev
项目监听在8080端口，出现页面即为成功。

下图为安装ESLint和单元测试框架后的文件结构
.
|-- build                            // 项目构建相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查 node、npm 等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack 基础配置（出入口和 loader）
|   |-- webpack.dev.conf.js         // webpack 开发环境配置
|   |-- webpack.prod.conf.js         // webpack 生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量（开发环境接口转发将在此配置）
|   |-- prod.env.js                 // 生产环境变量
|   |-- test.env.js                 // 测试环境变量
|-- src                              // 源码目录
|   |-- components                   // vue 公共组件
|   |-- store                        // vuex 的状态管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- test                             // 自动化测试相关文件
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .eslintignore                    // ESLint 检查忽略的文件
|-- .eslistrc.js                     // ESLint 文件，如需更改规则则在此文件添加
|-- .gitignore                       // git 上传需要忽略的文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息
.

当项目需要发布时，执行 npm run build命令来打包项目，打包后的存放在dist文件夹下。dist下的页面不能以文件的方式打开，需要通过发布后才能访问。

ps:第一次打包后，启动服务运行结果发现找不到相关的js和css，检查后发现dist前面多了一条“/”，所以需要在config/index.js里修改

将assetsPublicPath的值设为‘’；
--------------------- 
作者：Super洛伽 
来源：CSDN 
原文：https://blog.csdn.net/u013929284/article/details/62236925 
版权声明：本文为博主原创文章，转载请附上博文链接！

====================

Vue-cli3.0于8.11日正式发布，看了下评论，不是特别的乐观，说说我个人的意见，我是Vue的忠实粉，so....

大概三个月前超哥就已经得知3.0的消息，试着用了下，相比之下现在的3.0和测试时的区别：

modern mode。启用该模式会自动构建两个版本的 js 包，针对支持现代浏览器的原生 ES2015+ 包，和针对其他旧浏览器的包，生成的 HTML 会通过 <script type="module"> 和 <script nomodule> 进行自动降级，不需要任何特殊部署配置。原生 ES2015 包几乎不需要任何 polyfill 和编译，代码尺寸更小，现代浏览器 parse 和运行也更快。

然后直接正题，我把版本降回到的2.9，接下来直接使用3.0的安装命令:

 3.0的安装：vue create 3.0project；

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

如果版本为>3.0npm 会提示，如果你想运行请升级到3.0，还等啥升级呗。

一路回车是完事了嘛？，猛的一看，哦NO，本人并不喜欢eslint，是特别反感的那种，相信很多朋友都不喜欢。

来回头看 ，他是问你是否使用默认的preset 还是手动配置功能，而我们却回车回车再回车，让我们从新来过，手动选择，只因eslint，强迫症又来了。

上图是手动的情形，如果选择手动则出现这个这个页面，可以使用空格键选中或取消，a选中所有，i反选，来让我们看看好像和2.0+没啥太大的的区别，简单的过目一下猛的一看多了VUEX？之前有vuex嘛？反正我是自己配的，其他的什么单元测试、路由...2.0+也都有。

接下来看看 2.0+的：

上图是2.0+的

确实VUEX是新加的。来启动一下3.0：

3.0启动npm run serve

2.0启动npm run dev

至于为什么会变，来看一下package.json

这就秒懂了吧！！！

接下来简单的看一下项目目录对比：

build没了、config没了、哦对了还有最重要的一点，3.0的安装项目时自动下载node-model。

如果vue.config.js没了怎么破。

慌鸡毛，超哥带你走向人生巅峰！！！

在根目录下创建一个vue.config.js不就行了，哈哈哈哈哈，我也觉着逗，具体配置看文档，写的很详细！！！

还是给你们写两个常用的吧，一群吃瓜群众。。。

module.exports = {
    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
    // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
    // outputDir: 'dist',
    // pages:{ type:Object,Default:undfind } 
    devServer: {
        port: 8888, // 端口号
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        },  /
--------------------- 
作者：Nike丶超哥哥 
来源：CSDN 
原文：https://blog.csdn.net/weixin_42080056/article/details/81631661 
版权声明：本文为博主原创文章，转载请附上博文链接！