vue 脚手架安装步骤

• 安装node.js，git 配置 
  

  https://nodejs.org/en/
  node -v 查看版本 是否安装成功复制代码

• 淘宝镜像
  

  http://npm.taobao.org
  npm install -g cnpm --registry=https://registry.npm.taobao.org复制代码

• cnpm install -g @vue/cli -init --save
  vue -V  查看版本 是否安装成功复制代码

npm 文档链接

https://github.com/ericdum/mujiang.info/issues/6/
复制代码

-g     全局安装 

--save 与 --save -dev 的区别

二者都是将安装的包名写入package.json，区别在于写入的位置不同，前者是写入 运行环境dependencies 中，后者将会写入 开发环境  中 devDependencies 。

开发环境是只在开发的情况下才会使用的依赖包，比如丑化代码等，然后在发布之后并不需要丑化代码的依赖包，所以只需要安装到开发环境。

运行环境是指在项目完成并部署至服务器发布之后，需要一些jQuery，vue等等的框架之类的，如果没有这些依赖包项目不可以运行，所以就需要安装在运行环境中。

补充：
正常使用npm install时，会下载dependencies和devDependencies中的模块，当使用npm install –production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。

• cnpm install -g @vue-cli -init复制代码

• npm install -g @vue-cli复制代码

• vue init webpack  my 项目名字复制代码

• cd my  进入项目文件夹复制代码

  npm run dev运行项目
  复制代码

• npm run build 打包项目复制代码

注意  

build : 

在 config 文件夹下的index.js 中的build的 

           assetsPublicPath: '/',   ==>   assetsPublicPath: './',

dev :

• 安装依赖包
  axios   http://www.axios-js.com // 文档

cnpm install --save axios vue-axios
复制代码

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)复制代码

出错：   

将 mian.js 中 import axios from 'axios' Vue.prototype.axios= axios
复制代码

 使用

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})复制代码

jquery 注意点

npm install jquery复制代码

1. 在build文件夹下的webpack.base.conf.js进行配置
   

   const webpack = require("webpack")复制代码

2. 在module.exports里面加入
   可省略
   

   plugins: [           new webpack.optimize.CommonsChunkPlugin('common.js'),           new webpack.ProvidePlugin({             jQuery:"jquery",             $:"jquery",
   
                jquery:"jquery",
   
                "window.jQuery": "jquery",           })          ],复制代码

   
   

3. vue文件引入
   

   import $ from 'jquery';复制代码

结语 ：  以上是vue2.x 版本的安装过程， 项目可以正常运行

vue3.0 安装

在电脑中新建vue-project文件夹然后在此文件中新建vue的项目，所以node,git，cnpm 都是必须安装的，然后在此vue-project文件中的打开cmd 命令行 ，开始新建项目

• vue/cli 必须是在3 以上的版本
• 安装node , git 
• 第一种  vue-project 的cmd 中
  使用vue create 命令
  

  vue create  hello( 项目名称 )复制代码

       然后根据提示进行选择手动选择安装的依赖包或者选择默认

安装完成 
       运行 npm run serve  运行项目

       运行 npm run build 打包项目 

               build 项目的时候需要 先 在根目录下新建 vue.config.js  文件      

module.exports = {  publicPath: process.env.NODE_ENV === 'production'    ? './'       : '/'}复制代码

 ./  -- 是build 之后在dist 文件夹中的index.html 文件夹需要找到的css js  img 文件夹的路径  

参考链接    https://cli.vuejs.org/zh/config/#publicpath

• 第二种  vue-project 的cmd 中
  
  使用 vue ui 

运行成功之后 出现 

http://localhost:8000  复制代码

浏览器打开之后 

在页面中 创建项目，按照下一步的提示进行选择 

1 名字，包管理工具，其他默认

下一步 选择预设 默认与手动自己根据自己需要的自己进行选择，如果用过 vue ui 方式创建过项目并且是手动选择的预设同时在创建项目的同时保存了本次的预设选择，那么就会在下一次使用vue ui 的时候出现已经保存过的预设 

选择手动 ， 建议勾选 使用配置文件 这一选项，因为在build的时候会将各类文件分别按照目录存放。

下一步 选择 css 与 eslint 标准格式

然后创建 

会弹出一个保存本次选择的预设页面，如果保存那么下一次使用就可以快速选择使用，如果不保存那么下一次需要手动选择。

然后项目创建完成。

• 项目目录
  

  
  

hello-ui 项目名称
src 存放 vue与静态文件
public 是 vue依赖的html文件
package.json 是项目的基本信息，名字、版本号、开发与运行的依赖包、还有命令行

在运行 npm run build 之前需要 在 根目录下新建 vue.config.js 

此时 build 之后的 index.html 才可以正常运行 。

vue creat 与 vue ui 创建的项目是相同的，一个是代码创建，一个是良好的图形界面创建。