【精】Vue项目环境初始化

 

1.初始化环境准备

1.1 设置淘宝加速代理
npm config set registry https://registry.npm.taobao.org
查看是否设置成功
npm config ls

1.2 安装cnpm

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

1.3 安装webpack

npm install webpack -g

1.4 安装vue

npm install vue

2.安装vue-cli

2.1 全局安装
这样会直接安装3.x版本
npm install -g @vue/cli
vue -V / vue --version
拉取2.x旧版本
npm install -g @vue/cli-init
2.2 检测是否安装成功
vue -v
2.3 查找可用模板
vue list

3.创建项目

使用模板
vue init webpack-simple vue-cli-demo
进入项目目录
cd vue-cli-demo
安装项目依赖
vue install 
dev运行项目
vue run dev

生产环境下
将项目打包输出
npm run build

4.安装vue-route
npm install vue-router --save
5.安装axios
npm install axios --save
6.安装vuex
npm install vuex --save

7.安装element-ui
npm install element-ui -S
8.安装style-loader
由于默认不安装这个，如果要使用element-ui需要单独安装
npm install style-loader -D
9.安装less-loader
如果需要自定义样式的话
npm install less less-loader -D

10.webpack.config.js
需要配置如下loader:
      {
        test: /\.less$/,
        loader: 'less-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }

--save：将保存配置信息到pacjage.json的dependencies节点中。

--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。

dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块

devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。