vue.js环境搭建:
1. 安装node.js
官网地址: https://nodejs.org/en/ (最好安装最新版的node.js)
2. 安装node.js
注意:在安装Node.js前,先cmd(命令提示符)运行“node–v”查看是否已经有Node.js版本,若有,则请先卸载或删除。
Node.js安装过程简单,按照提示点“Next”并选择安装位置即可(建议不装系统盘)
3. npm安装
打开cmd,进行安装,此处选择淘宝NPM镜像下载安装(因为淘宝NPM镜像是国产的,更快,没有别的原因,想了解详情请看https://npm.taobao.org/):
输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org -g 代表全局安装
安装成功以后检查一下版本就可以使用cnpm了 cnpm -v 、node -v 等
4. vue-cli安装
命令行为cnpm install -g vue-cli
5. 查看vue信息
6. 创建项目
创建一个文件夹,如:MyVue文件夹,并用cmd命令行进入此文件夹下(cd D:\workspace_webstorm\web-cus-vue)
创建项目,命令:vue init webpack my-vue
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
具体操作情况如下
//vue-cli2.x.x 版本 安装指定版本
//所有版本安装,前提是已经全局安装过node 和 全局安装过webpack
//
//npm install -g vue-cli@2.x.x
//vue-cli2.x.x 版本卸载
//
//npm uninstall -g vue-cli
//
//vue-cli3.x.x 版本安装
//3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
//
//npm install -g @vue/cli
//
//vue-cli3.x.x 版本卸载
//
//npm uninstall -g @vue/cli
//
//全局安装 vue-cli
//
//npm install --global vue-cli
//
//创建一个基于webpack模板的新项目
//
//vue init webpack my-project
//
//接下来会有这些问题出现
//Project name项目名称(确定按enter,否按N) (按enter)
//
//Project description (A Vue.js project);项目描述(一vue.js项目)。(随意输入一段简短介绍,不
//
//写直接回车也行)(按enter)
//
//Author (sunsanfeng);作者(sunsanfeng)。(确定按enter,否按N)(按enter)
//
//Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only:
//
//about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in
//
//.vue files - render functions are required elsewhere;Vue公司的建立(使用箭头键)>运行时+编
//
//译器:大多数用户推荐运行时间:约6kb轻民+ gzip,但模板(或任何Vue具体HTML)只允许在。VUE文件渲染
//
//功能是必需的其他地方。(按enter)
//
//
//Install vue-router? (Y/n);安装的路由?(Y/ n)。(可安可不安,建议安装,因为项目肯定能用上)
//
//(选Y)
//
//Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/ n)。(使用ESLint语法,就要做好心理
//
//准备,除非你非常懂ESLint语法,要不就会处处报错,建议N) (选N)
//
//Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / n)。(选N)
//
//Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / n)。(选N)
//
//should we run ‘npm install’ for you after the ogject has been created? ;(选择Yes,use
//
//NPM)(按enter)
//
//安装依赖
//
//cd my-project
//
//npm install
//
//npm run dev
7. 运行项目
接着打开浏览器访问:http://localhost:8080输入上述网址
然后打开文件夹就会发现以下这些文件夹,但是这些文件夹都是干啥的嘞? 接着往下看
vue目录简介
build 项目构建(webpack)相关代码
config 配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
assets: 放置一些图片,如logo等。
components: 目录里面放了一个组件文件,可以不用。
App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式
8. 总结多练多记总没坏处的,不要像我之前没记住这些操作到现在还是没有记住。创建的时候报错还要百度、查博客。我太难了!