vue2.0使用(1):创建新项目
来源:互联网 发布:淘宝短信营销作用大吗 编辑:程序博客网 时间:2024/06/05 04:10
vue版本:2.2.2
vue有两种项目创建方式,一种是下载vue.js,通过script标签引入即可;另一种通过vue-cli构建基于webpack的项目,这种项目构建发布需要部署node环境,不能以文件的方式直接打开。
1.全局安装vue命令行工具
npm install -g 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 // 项目基本信息
.
|-- 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的值设为‘’;
0 0
- vue2.0使用(1):创建新项目
- Angularjs4.0 创建新项目
- gitlab使用--创建一个新项目
- 使用vue2.0创建的项目的步骤
- 创建新项目
- 创建新项目
- 在VC++中使用MASM-创建新项目
- git的创建新项目的使用
- vue2.0入门--创建项目
- vue2.0 使用 filters
- cocos2dx2.0以上创建新项目的方法
- Vue2.0使用总结中......
- vue2.0 $refs的使用
- vue2.0使用(2)
- vue2.0使用vue-router
- VUE2.0 element upload使用
- vue2.0使用(一)
- vue2.0中使用sass
- html5中如何加入音乐文件和视频文件
- Javascript内置对象总结
- 文件或目录损坏无法读取
- Java是传值还是传引用
- 关于配置tomcat后出现401 403问题的解决方法
- vue2.0使用(1):创建新项目
- 51nod 1821 最优集合
- 指数(道琼斯指数)
- 分治---快速排序
- python学习笔记(4):字符串及编码问题
- scaleType的详细解释
- 正则表达式元字符
- 棋盘覆盖问题
- CSS基础知识深入探讨