vue全家桶 ---创建一个新的vue项目

2,159 阅读1分钟

本文涉及到webpack、node.js、vue、vue-router、vuex、axios、less、element-ui、es6、git等相关知识。

1、前提基础

  • vue.js有著名的全家桶系列,包含了vue-router、vuex、axios,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。
  • 学习本文之前需要掌握基本的js、css、html基础知识
  • node.js、git、webpack基础知识
  • 对vue.js、vuex等有基本的了解
  • vue官网:cn.vuejs.org/v2/guide/
  • vue-router官网:router.vuejs.org/zh/

2、开发环境

  1. 安装node.js,直接去官网下载安装包即可:nodejs.org/en/,安装完成以后可以打开cmd/git,通过node -v/npm -v 查看版本。
  2. 安装webpack, 通过npm install -g webpack全局安装。
  3. 安装git(用于代码管理),直接百度下载安装包即可

3、开始开发

  1. 这里我们采用vue-cli搭建一个新的项目,所以需要先安装脚手架 npm install --g vue-cli。
  2. 初始化一个项目:vue init webpack vue_demo_project,因为要用到vue-router,所有这里选择安装vue-router,建议安装ESlint,有助于养成良好的编程习惯。
  3. 安装依赖:cd vue_demo_project, npm install (如果安装速度较慢,可以使用cnpm安装,npm install -g cnpm --registry=https://registry.npm.taobao.org)。
  4. 在编辑器中打开项目,在根目录下运行npm run dev。默认是8080 端口,可以在config里的index.js修改。
    ps:建议将build 里的assetsPublicPath的路径前缀修改为 ' ./ ',因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

4、到这里我们已经成功的创建一个新的vue项目。