最近学习,搭建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
版权声明:本文为博主原创文章,转载请附上博文链接!