vue 完整项目配置
注意:Vue 不支持 IE8 及以下版本,因为它使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。前提:安装最新版的 node.js (自带配置且安装好npm)1.安装node.js...
·
注意:Vue 不支持 IE8 及以下版本,因为它使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。
前提:安装最新版的 node.js (自带配置且安装好npm)
1.安装node.js
Node.js安装包及源码下载地址:https://nodejs.org/en/download
Node.js历史版本下载地址:https://nodejs.org/dist
2.安装vue
//方法1.安装依赖库 vue(默认最新版本)
npm install vue //回车后执行
//方法2.安装指定版本的 vue, element 库和 vuex, axios 库
npm install vue@2.1.6 element-ui@1.4.6 vuex axios //回车后执行
//查看版本
node -v //回车后查看 node.js 版本
vue -V //回车后查看 vue.js 版本(注:这里的V是大写)
3.使用CLI搭建 SPA 脚手架
//安装依赖库和命令行工具
npm install vue@2.1.6 element-ui@1.4.6 vuex axios //回车---安装依赖库,建议指定 vue 和 element 版本,避免版本升级带来意料之外的 bug
npm install -g vue-cli //回车---全局安装 vue 命令行工具
//选择项目的安装路径,若省略此操作则默认安装到 C 盘, cd.. 表示返回上级
d: //回车---选择D盘
cd test //回车---选择D盘的test文件夹
//创建vue项目 (后续创建vue项目只需操作以下步骤)
vue init webpack myProject //回车---创建一个基于 webpack 模板的新项目myProject
//等待下载完成后,配置项目基础项
Project name (myTest) //项目名称,可不用书写直接回车
Project description (A Vue.js project) //项目描述,可不用书写直接回车
Author (iwen <iern@iwens.ort>) //项目作者,可不用书写直接回车
Vue bulid(Use....) //回车
Install vue-router?(Y/n) //是否安装路由, 输入 Y 回车
Use ESLint to lint your code?(Y/n) //是否安装代码检查, 输入 n 回车(需要时选择 Y )
Set up unit tests (Y/n) //是否安装单元测试, 输入 n 回车(需要时选择 Y )
Setup e2e tests with Nightwatch?(Y/n) //是否安装e2e测试, 输入 n 回车(需要时选择 Y )
/*
这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader就会配套下载。
所以如果我们确定不用的话最好不要yes,不然下一步要下很多没有用的loader
*/
cd myProject //回车---进入项目目录
npm install //回车---安装依赖
npm run dev //回车---运行项目
//然后提示: (打开页面网址即 http://localhost:8080)
Your application is running here:http://localhost:8080
以上vue 环境搭建以及项目创建流程,下一篇主要介绍项目的基本结构与配置,以及打包注意事项。
传送门:
vue项目配置2-项目目录结构,vue打包白屏,图片加载不出等问题
更多推荐
已为社区贡献6条内容
所有评论(0)