下载安装 node.js

node 官网下载地址
控制台输入 node-v 检查自己系统有没有下载过 node
使用 npm 包管理工具，推荐去国内最常用的库：https://cnpmjs.org
国内用户在终端执行以下代码替换淘宝镜像进行下载，换成了淘宝了镜像，在国内网速很快。

alias cnpm="npm --registry=https://registry.npm.taobao.org --cache=$HOME/.npm/.cache/cnpm --disturl=https://npm.taobao.org/mirrors/node --userconfig=$HOME/.cnpmrc"

alias（别名）的一串命令将 npm 重命名为 cnpm

安装 vue-cli(vue-cli 是 vue 官方提供的脚手架工具)

用 vue-cli 初始化项目的优势：

• 成熟的 vue 项目架构设计
• 本地测试服务器
• 集成 webpack 打包上线方案

安装系统要求：

• Node.js(>=4.x)
• Git
• 一个能使用 node 的命令行终端

全局安装 Vue-cli

npm install vue-cli -g

创建项目

在自己项目文件夹下打开控制台

安装 webpack 模板，并设置工程信息

vue init webpack my-project [my-project 为项目名称]
控制台需要设置如下问题

• Project name：项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车
• Install vue-router:是否需要 vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件
• Use ESLint to lint your code:是否使用 ES 检测器，默认使用，这样会生成相关的 ESLint 配置
• Setup unit tests with Karma + Moch?: 是否安装单元测试。一般选 no，根据自己项目情况选择”Y”或”N”
• Setup e2e tests with Nightwatch：是否安装 e2e 测试。一般也选 no，根据自己项目情况选择”Y”或”N”
  以上配置如选择 yes 则生成的项目会自动有相关的配置，有一些 loader 我们就要配套下载。
  如果我们确定不用的话最好不要 yes，防止下很多没有用的 loader。

部署 Vue 项目完成之后的目录

• 首页入口 index.html
• build 配置文件夹
• webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js 三个 webpack 的配置文件，分别是基本 webpack 配置、开发环境配置、生产环境配置。

• config 配置文件夹
  其中最主要的 index.js 用于配置代理服务器，和后台联调时在 proxyTable 这个属性设置一个后台地址即可。
  

• src 文件夹（主要以及使用频率最高的文件夹、大部分开发在 src 目录下、存储主要源码）
  
• assets: 共用的样式、图片
• components: 业务代码存放位置、里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
• router: 设置路由
• App.vue: vue 文件入口界面，App.vue 是可以热更新的。
• main.js：入口文件、对应 App.vue 创建 vue 实例，对应 webpack.base.config.js 里的入口配置
• static 文件夹（保存静态文件）
  存放的文件不会经过 webpack 处理，可直接引用
  如 swf 文件要引用可在 webpack 配置带 swf 后缀名的文件处理的 loader，也可直接将 swf 文件放在这个文件夹引用
• package.json（npm 所需要的一套配置文件）
  这个文件有两部分是有用的：
  • scripts 里面设置命令，
    如设置了 dev 用于调试则我们开发时输入：npm run dev
  • 如设置了 build 输入
    npm run build 用于打包会生成部署一套上线目录文件（完成之后多了 dist 目录）
    我们需要的依赖包,在 dependencies 和 devDependencies 中，分别对应全局下载和局部下载的依赖包

安装依赖

• 进入项目文件夹：cd my-project
• 打开 package.json 文件，找到 devDependencies 和 dependencies，删掉里面我们不需要的依赖包

• 根据自己项目需要通过命令 sudo npm install /npm install（安装项目依赖）、下载其他依赖包如 npm install vue-resource 等，一个个下载

  要在有 packge.json 文件的目录下、推荐使用 yarn，速度更快、相关依赖安装之后目录会多一个 node_modules

跑项目 npm run dev

• 下载好依赖后先输入 npm install
• 如有缺漏再根据提示去下载。

• 输入命令 sudo npm run dev / npm run dev(在本地启动测试服务器)
  

  ESLint: 帮助检查 Javascript 编程时的语法错误，保证多人开发一个项目保持语法一致。
  Webpack: 设置代理、插件和 loader 处理各种文件和相关功能、打包等功能。整个项目中核心配置
  iview: 基于 vue 的一套样式框架，里面有很多封装好的组件样式
  ES6 语法：利用 babel 处理。
  vue --help vue 的命令行查看帮助
  vue -v 看版本

步骤总结：

• npm install --global vue-cli 下载 vue-cli 脚手架
• vue init webpack myProject 生成项目，形成基本结构
• npm install 下载依赖包
• npm run dev 运行

项目实例

build/webpack.base.config.js
进行 loader 的配置，以及有一个 iview 的 css 文件不进行 babel 的处理，如下

src/router/index.js:
import 引入组件文件，根据 vue-router 写上相应的路由配置

src/components:
业务代码集中地，我做了一个简单的，只有三个组件。然后在每个组件中又分成几个组件构成。

手把手教你新建一个Vue项目

原文：https://www.cnblogs.com/EdisonVan/p/11382274.html