vue项目环境搭建及一个简单的vue例子

https://blog.csdn.net/qq_33036599/article/details/79656597

准备工作：安装node，vue-cli脚手架

1.安装 node （ https://nodejs.org/en/）

     在命令行输入 node -v 查看是否安装成功

   淘宝的cnpm命令管理工具可以代替默认的npm管理工具：

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

2.安装 vue-cli脚手架

    npm install -g vue-cli

    在命令行输入vue 回车，查看是否安装成功

3.开始初始化项目

vue init webpack vue_demo （vue_demo是项目名称）

 1.安装mint-ui：=====   npm i mint-ui -S

2.借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

具体用法见：https://mint-ui.github.io/docs/#/zh-cn2/quickstart

3.安装一些依赖项

安装axios:====  npm install --save axios

用到post请求时，需要安装qs:=====  npm install qs

前端加密：=====   npm install --save crypto-js

md5加密：=====  npm install --save js-md5  

微信分享：======   npm install weixin-js-sdk

安装vuex：======  npm install vuex -S

4.项目配置代理

5.Vue打包后出现一些map文件的解决办法：

 

问题： 可能很多人在做vue项目打包，打包之后js中，会自动生成一些map文件，那我们怎么把它去掉不要呢？

1，运行  cnpm run build  开始打包

2，会在项目目录下自动创建dist目录，打包好的文件都在其中

解决办法：去src/config/index.js中改一个参数：

productionSourceMap:false

把这个改为false。不然在最终打包的文件中会出现一些map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。

有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

 6.webpack vue build配置中修改assetsPublicPath为"./"

 

 

二：了解vue项目的目录结构（https://www.cnblogs.com/---godzilla---/p/11444411.html）