Vue项目初始化

vue项目初始化

vue项目使用element-ui：https://element.eleme.cn/#/zh-CN

.初始化环境准备

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(文件夹名)
vue init webpack 文件名
进入项目目录
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：开发时的依赖。里面的模块是开发时用的，发布时用不到它。