Vue-cli搭建

女爷i 2021-10-06 03:12 245阅读 0赞

### vue-cli搭建 ###

*  安装环境
 *  vue-cli2.0搭建
 *   *  创建项目
     *  目录结构
     *  运行打包
 *  vue-cli3.0搭建
 *   *  创建项目
     *  目录结构
     *  运行

# 安装环境 #

（1）安装nodejs  
由于Nodejs自带了npm，所以你安装Nodejs后，npm也会自行安装。  
下载地址：[https://nodejs.org/en/][https_nodejs.org_en]

C:\Users>npm -v
    6.4.1
    C:\Users>node -v
    v11.1.0

（2）安装cnpm  
由于npm的镜像是国外的，为了加快下载速度，可以通过国内淘宝镜像来下载，所以采用cnpm。cnpm使用的是淘宝网的镜像http://npm.taobao.org

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

# vue-cli2.0搭建 #

cnpm install --global vue-cli

默认安装目录如下  
![在这里插入图片描述][20190111133202990.png]

## 创建项目 ##

vue init webpack test

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70]

## 目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 1]  
build----项目构建的一些代码  
config—开发环境的配置  
dist—项目构建发布的文件  
node\_modules—项目依赖包  
src—源码  
static—静态资源  
.babelrc—ES6编译的一些配置  
.editorconfig—代码风格配置  
index.html—入口页面  
package.json—项目基本信息，依赖等

## 运行打包 ##

运行  npm run dev
      打包  npm run build

# vue-cli3.0搭建 #

npm install -g @vue/cli

## 创建项目 ##

（1）创建项目test

vue create test

![在这里插入图片描述][2019011220473936.png]  
出现默认和手动选择  
（2）手动选择  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][2019011220493868.png]

## 目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 3]

## 运行 ##

npm run serve  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 4]

[https_nodejs.org_en]: https://nodejs.org/en/
[20190111133202990.png]: /images/20211006/54325d65bd8c436aaf5c2e5ce60d9f2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70]: /images/20211006/6e538ebb830346718ae09c12e8332371.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 1]: /images/20211006/7af7fd51352a4a19823ebf474e007921.png
[2019011220473936.png]: /images/20211006/9d82f6ae7e4a4bcda6b35efdd1f6ef58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 2]: /images/20211006/852b61551a924aecbd8ea062473b8796.png
[2019011220493868.png]: /images/20211006/dd9ae5e0aee949898e1c311ed9dec7d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 3]: /images/20211006/e3ea146e1a354e178d3a6d4d8edb98f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 4]: /images/20211006/70ca4a8a222b44c48845cb6da8432e39.png