vue项目环境搭建及运行

Posted on 2019-09-27 11:40  jessie-xian  阅读(6029)  评论(0编辑  收藏  举报

一.环境搭建

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相同,问题就这样愉快地解决了

(后面遇到别的问题会继续更新!!!)