基于Vue2的项目构建记录之一:环境搭建与依赖安装
Vue

发布于 2018年05月06日, 阅读 1061 次, 1 条评论

1、安装node

百度下载安装包,一步一步安装即可,完成后cmd打开命令面板检验是否成功:

node -v查看node版本

npm -v查看npm版本

由于npm拉取速度较慢,所以可以用cnpm代替来加快速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm相关信息:https://npm.taobao.org/

2、vue脚手架及依赖项安装

全局安装vue-cli:cnpm install --global vue-cli

然后cd切换到安装目录,创建一个基于 webpack 模板的新项目并选择安装vue-router(vue init webpack my-project),可以不选择e2e等校验测试什么的,当然若有需要可选择,最后选择手动安装依赖

然后cd切换到该项目目录(cd my-project),安装依赖cnpm install

安装element-ui和axios:

cnpm i element-ui -S
cnpm i axios -S

如果用到sass:cnpm i sass-loader node-sass -D(-S 是 --save, -D 是 --save-dev)

3、element和axios的引入

在main.js中添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

import axios from 'axios'
Vue.prototype.$http = axios

4、构建命令

  • npm run dev即可在浏览器中查看初始效果,所做的更改也会实时刷新,这就是构建工具的魅力所在,免除每次都要手动刷新的不便,打开控制台可以看到它是通过websocket来实现的。
  • npm run build构建生产包,默认会生成一个dist文件夹,里面包含入口文件index.html的资源文件夹static。
  • npm run build --report查看打包报告

相关查阅

有朋自远方来...评论一下呗O(∩_∩)O

  • 评论(1)

    天津网站建设 [ 回复 ] 1楼
    2018-11-16 17:38

    这个对我很有用,最近正在学习VUE