突然热血来潮,实操了一把vue脚手架搭建全新vue项目,现将详细步骤贴出(审核不通过也是醉了),富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善
一.node环境安装。
用vue-cli构建的项目是以node.js为基础的,可以理解为node.js是vue项目再构建时需要用到的环境。无论是本地serve还是打包编译都与其有密切关系,总体说node.js为前端工程化提供了必要条件。之前看到过vue.js、webpack实现、node.js三者的关系:vue.js工程化=>webpack实现=>node.js(webpack基础)
1.下载地址:https://nodejs.org/en/
2.检查node环境安装是否成功:npm包管理器是集成在node中的,所以直接输入npm -v 就能查看到版本信息,node同样如此
温馨提示:node的版本尽量高点,个人建议v8.9或者v10.0.0版本亲测好用,否则会出现不兼容情况很麻烦滴···
3.使用node安装依赖时访问的是~~~(发布不出去,哭唧唧:富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善),或者由于网速原因导致下载失败,小编使用的是dl(富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善)访问下载,当然也可以使用淘宝镜像代理
:
http://npm.taobao.org/,输入:npm install -g cnpm –registry=https://registry.npm.taobao.org
,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。
···接下来就是重头戏了···
二.搭建vue项目环境
1.全局安装vue-cli (输入:npm install --global vue-cli)
2.接下来就是进入你的项目目录中,创建一个基于webpack模板的新项目:vue init webpack+项目名
.我的项目放在了E盘下的Demo文件夹中,进入步骤都会8,我也贴出来:dir可以看到你该盘下的所有文件
ok,进入到项目目录中后,执行vue init webpack+项目名命令:
解释说明:
Vue build: 打包方式,回车即可;
Project name:项目名称;
Project description:项目描述;
Author:作者;
Install vue-router : 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;
Use ESLint to lint your code : 是否需要 js 语法检测 目前我们不需要 所以 n 回车;
Set up unit tests : 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch : 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
3.根据提示操作即可:进入项目–cd vue-demo
,启动项目–npm run dev
4.我们的目录文件,至此就创建成功
5.启动成功效果图
三.vue项目目录讲解
我们的vue项目文件目录如上图所示,对主要部分解释说明。
├── build/ # webpack 编译任务配置文件: 开发环境与生产环境
│ └── build.js # 生产环境构建脚本
| └── check-versions.js # 检查npm、node.js
| └── utils.js # 构建相关工具方法
| └── vue-loader.conf.js # 配置了css加载器以及编译css之后自动添加前缀
| └── webpack.base.conf.js # webpack的基本配置
| └── webpack.dev.conf.js # webpack开发环境配置
| └── webpack.prod.conf.js # webpack生产环境配置
├── config/
│ ├── index.js # 项目核心配置(项目配置文件)
│ └── dev.env.js # 开发环境变量
| └── prod.env.js # 生产环境变量
├ ── node_module/ #项目中安装的依赖模块(加载的项目依赖模块)
── src/ # 这里是我们的主要开发目录,基本上要做的事情都在这个模块里边,主要包含了目录文件
│ ├── main.js # 程序入口文件(入口js文件)
│ ├── App.vue # 程序入口vue组件,是根组件
│ ├── router # 前端路由,我们需要配置的路由路径写在index.js文件里
│ ├── components/ # 组件目录,我们写的组件就放在这个目录里(可封装我们的公共组件)
│ │ └── ...
│ └── assets/ # 资源文件夹,放置一些图片或者公共js、公共css。这里的资源会被webpack构建
│ └── ...
├── static/ # 纯静态资源 ,如图片、字体等(直接拷贝到dist/static/里面)。不会被webpack构建
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .gitignore # 用来过滤一些版本控制的文件,比如node_modules文件夹
├── index.html # 入口模板文件(首页入口文件,可以添加一些meta信息等)
└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息(npm包配置文件,定义一些项目npm脚本、依赖包等信息)
└── README.md #介绍自己这个项目的,可参照github上star多的项目。
可以开始我们的vue项目啦—自由发挥,小编的vue项目将会在后面贴出来···,可以稍稍关注哦!