1. 安装node.js
地址:https://www.runoob.com/nodejs/nodejs-install-setup.html
查看版本:node --version
查看npm版本: npm -v
安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 安装VUE-CLI脚手架
vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目。
安装脚手架:npm install -g @vue/cli 或cnpm install vue-cli -g
注:-g代表全局安装
查看版本(是否安装):vue -V
3. 创建一个基于webpack模版的项目
1) Vue项目初始化命令如下,若没有安装webpack则先安装webpack
npm install -g webpack
2) 创建项目
Vue init webpack myVue
注:安装过程中有个选项(Use ESlint to line your code?选择No)
运行初始化命令的时候会让用户输入几个基本的选项,如项目名称、描述、作者等信息,如果不想填写回车默认就好.
l Project name (my-vue):项目名称
l Project description (A Vue.js project)项目描述一个Vue.js项目
l Author:作者
l Install vue-router?(Y/n):是否安装Vue路由,也就是以后是spa(单页面应用
l Use ESLint to lint your code?(y/n):使用ESlint到你的代码?(y/n)
l Pick an ESlint preset(Use arror keys):选择一个预置ESLint(使用箭头)
l Setup unit tests with Karma +Mocha?(y/n):设置单元测Karma +Mocha?(Y/N)
l Set e2e tests with Nightwatch?(y/n):设置端到端测试,NightWatch?(y/n)
注:这些都看个人情况设置
初始化完后的vue项目目录如下:
3) 进入到myVue目录下,使用npm install 安装package.json包中的依赖,命令如下:
cd myVue
npm install
4) 运行项目
npm run dev 或 cnpm run dev
在浏览器上输入:localhost:8080,将会出现下面的vue初始界面
5) 结束项目运行:
Ctrl+v,选择Y即可停止项目的运行