vue项目环境搭建及运行

一.环境搭建

1.安装node.js（window10）

下载完直接安装，下一步。。。

安装好node，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置
在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口

2.安装cnpm

由于npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要npm的国内镜像---cnpm
在命令行中输入

npm install -g cnpm --registry=[http://registry.npm.taobao.org](http://registry.npm.taobao.org/)

3.安装webpack

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 webpack 的核心是依赖分析,把依赖分析出来了，其他都是细枝末节。

npm install webpack -g

4.安装vue-cli

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板
，这个过程会耗时十几秒，等走完就好；到此整个环境搭建好

cnpm install vue-cli -g

二.运行项目

一个比较典型的用webpack管理的vue项目应该有如下文件和文件夹：
config/：定义代理的域名
dist/: 整个前端项目用webpack打包后的目标存放文件夹，里面一般有build.js文件
lib/: 开发时引用的一些依赖文件，最经典的就是jquery
node_modules/：用npm对项目依赖组件进行安装时就放在这个文件夹里。
src/：自己写的源代码
index.html：主页入口文件
package.json和webpack.config.js：这两个文件应该是组件依赖关系和管理打包的配置文件？不太懂，反正没有是不能cnpm install、cnpm run build、cnpm run dev的。

1.cd desktop/项目名称或者在vsc终端打开

2.进入项目之后安装依赖

npm install

3.输入命令“npm run dev”，此时会用nodejs启动这个前端的vue项目

三.可能会出现的报错

（记录一些遇到的报错及解决方法）

1.域名问题

一开始没看上面，不停百度webpack-dev-server --inline --progress --config build/webpack.dev.conf.js，根据网上解决方法，总以为是webpack的版本问题，一直卸了装，装了卸，还有npm install也一直删了重新下载，最后解决办法：找到config文件里面的index.js文件，把host地址改成自己本机的或者localhost（因为是下载的别人写的项目，如果他配置的不是loaclhost，而是自己本机域名，就会监听不到，导致报错）

———————————————————————————————————————————————

2.vue版本和vue-template-compiler的冲突问题

这是vue版本冲突问题，但是，主要问题不是vue-loader和vue-template-compiler的冲突，而是vue和vue-template-compiler的冲突，所以，我将vue版本修正为与vue-template-compiler相同，问题就这样愉快地解决了

（后面遇到别的问题会继续更新！！！）

最后编辑于：2019.04.11 11:43:49