一、Vue 开发环境:
Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言
npm::Nodejs下的包管理器
webpack: Vue的模板文件。把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli::用户生成Vue的脚手架。
二、Vue 环境搭建:
1.安装node.js:
从node.js官网下载并安装node,安装过程很简单,一直默认。
npm 版本需要大于3.0,如果低于此版本需要升级它。
查看版本:
node -v
npm -v
升级 npm:
npm install npm -g
2.使用淘宝NPM镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后可以用cnpm代替npm来安装依赖包
如果安装失败,可以npm cache clean清理缓存,重新安装。
三、Vue 安装vue-cli脚手架构建工具
cnpm install --global vue-cli
判断是否安装成功:
vue -V
卸载vue-cli脚手架
cnpm uninstall --global vue-cli
四、Vue 使用vue-cli构建项目
vue init webpack my-project
my-project是项目名称,接下来会进行一些设置。
参考:
arget directory exists. Continue? (Y/n) 直接回车默认(然后会下载模板,这里可能需要连代理)
Project name (vue-test) 直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 直接回车默认
Install vue-router? 直接回车默认(安装路由)
Use ESLint to lint your code? No(严格代码检测)
pick an eslint preset. 默认Standard
set up unit tests with karma + mocha?No(单元测试不需要)
set up e2e tests with Nightwatch?No(单元测试不需要)
五、Vue 安装依赖
进入项目目录:
cd my-project
安装依赖:
cnpm install 或 npm install
项目结构里,多了一个node_modules文件夹
六、Vue 是否搭建成功
启动编译项目:npm run dev
在浏览里输入:localhost:8080(默认端口为8080)
七、Vue 发布项目
npm run build
八、安装Vue组件
一、AJAX(axios)安装
npm install axios --save
二、AJAX参数转换(qs)安装
npm install qs --save
三、Vuex 安装:
npm install vuex --save
四、前端框架(vue-beauty)安装
npm install vue-beauty --save
五、前端手机框架(Mint UI)安装
npm install mint-ui --save
六、前端框架(Element UI)安装
npm install element-ui --save
七、前端框架(Ant-design-vue)安装
npm install ant-design-vue --save