vue-cli创建vue项目基本步骤

vue是当前比较流行的前端框架之一，被很多大公司所使用，学会使用它将会使我们的前端开发变得更加高效。这里简单介绍一下通过vue-cli(俗称“脚手架”)创建vue项目的步骤。

一、环境搭建

1. 在电脑上安装nodejs.
2. 检查node和npm的版本，更新npm版本

node -v //查看node版本 
npm -v  //查看npm版本
//如果不是最新版本，可以运行如下指令
npm install -g npm

3. 使用淘宝npm镜像，cnpm

//当npm速度很慢时，可以考虑使用cnpm命令安装模块
//安装cnpm的指令
npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

4. 安装vue-cli，有了这个才能创建vue基本项目

cnpm install vue-cli -g //全局安装vue-cli
vue list    //检查vue-cli是否安装成功

二、创建项目

按照步骤一搭建完环境之后就可以开始创建项目了

1. 打开命令行，进入要创建项目的文件夹
2. 命令行输入如下命令

//在当前文件夹下生成该项目名称的vue项目文件夹
vue init webpack "项目名称"

3. 进行一些选择
   输入命令后会出现一系列的选项，是关于vue项目的一些配置，推荐使用如下选择

'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name myvue
? Project description my first vue project
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No  //以下三处选择No会避免一些警告
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "myvue".

这样一个vue基础项目就创建完毕啦。

三、开发和运行

项目创建完毕后就可以用开发工具打开进行开发了，那么如何在开发状态下查看运行效果呢?
方法如下，以下命令需要进入项目文件夹后操作

1. 首先安装依赖，一些和运行项目相关的依赖通过这个命令安装

npm install //安装依赖有时候不成功可以换成cnpm或者再试一遍

2. 启动项目

npm run dev //这样就可以启动了

四、目录结构

build   //构建相关
config  //配置相关，启动端口号等配置
node_modules    //下载的模块
src     //编写的源码
    assets  //存放一些资源
    components  //存放组件(vue文件),主要开发的地方
static  //静态资源目录，CSS,js,图片

五、打包

//打包生成dist文件夹，将这个文件夹直接部署到服务器上即可
npm run build

当然，如果直接这样打包部署后应该是访问不了的。这里有一个坑，就是要修改项目config文件夹下index.js中的build的配置。将build中的assetsPublicPath的值原本是"/",修改成"./"，如下。修改之后打包就没问题了。

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    ......