vue项目开发流程

使用vue-cli3
(关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。)

1、安装node 

输入npm测试是否安装成功（npm-v查看node版本）

2、安装webpack

npm install webpack -g

3、安装Vue脚手架（vue-cli）

npm install -g @vue/cli (输入vue验证是否安装成功，vue --version检查其版本是否正确 (3.x))

4、找到项目工程文件夹

cd 文件夹目录

5、创建vue项目
(1).vue-cli3:
vue create vue-demo(文件名)

(2).Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init
vue init webpack vue-demo(文件名)

6、安装项目依赖包

npm install   (增加node_modules)[用npm，beacuse cnpm会缺失一些依赖库]

[卸载node_modules]:
npm install rimraf
rimraf node_modules

7、安装vue路由模块和网络请求模块

(1).vue-cli3:
vue add router
vue add vuex
(2).vue-cli2:
npm install vue-router vue-resource --save

8、运行vue项目

npm run dev

9、打包

npm run build


//==============================================================================
[1].vue项目命名规范：vue-vue(英文小写-英文小写)
[2].选择css：sass,less,stylus 
    # Sass
    npm install -D sass-loader node-sass
    # Less
    npm install -D less-loader less
    # Stylus
    npm install -D stylus-loader stylus
[3].请求方式:axios
    npm install axios --save 
    main.js引入：
    import axios from 'axios'
    Vue.prototype.$axios = axios
    使用：
    this.$axios({
          method: 'get',
          url: this.baseURL+'/api',                                
          headers: {
            'Content-Type': 'application/json'
          },
          params: this.qs.stringify({  //qs:get请求拼接
            id: 1,
            sign: 'hh',
          })})
          .then(response => {
            console.log("返回数据",response);
          })
          .catch(error => {
            console.log("错误",error)
          });
[4].get请求将data转换成拼接形式：qs
    npm install qs --save
    main.js中引入：
    import qs from 'qs'
    Vue.prototype.qs = qs
[5].配置请求前缀：config->dev.env.js,prod.env.js
    API_ROOT: '"http://192.168.1.0:8080"'
    main.js中定义：
    Vue.prototype.baseURL = process.env.API_ROOT;
[6].juqey
    npm install jquery --save
    build->webpack.base.conf.js配置：
    var webpack = require("webpack")
    在module.exports的最后加入
    plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
    })]
    main.js中引入：
    import $ from 'jquery'
[7].ip地址访问：package.json
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
[8].下拉刷新上拉加载可以用:vue-scroller
    npm i vue-scroller -S
    main.js中引入
    import VueScroller from 'vue-scroller'
    Vue.use(VueScroller)
    页面：
    <div style="position:relative">
        <scroller 
          :on-refresh="refresh"   
          :on-infinite="infinite">
        </scroller>
    </div>
[9].复制粘贴板功能：vue-clipboard2
    npm install --save vue-clipboard2
    main.js中引入
    import VueClipboard from 'vue-clipboard2'
    Vue.use(VueClipboard);
    页面：
    <div>{{msg}}</div> 
    <div 
      v-clipboard:copy="msg"
      v-clipboard:success="onCopy"//复制成功方法
      v-clipboard:error="onError">复制电话</div>
    </div>
[10].项目名称更改：package.json
     name:''