美文网首页
vue项目环境搭建及运行

vue项目环境搭建及运行

作者: 贤总_ | 来源:发表于2019-04-11 09:55 被阅读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相同,问题就这样愉快地解决了


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

相关文章

  • Vue(7)

    一、环境搭建 下面我们需要为后面要做的Vue项目搭建开发环境。 1、基本的运行环境 该项目使用node& vue在...

  • vue项目环境搭建及运行

    一.环境搭建 1.安装node.js(window10) 下载完直接安装,下一步。。。 安装好node,可以先进行...

  • Ionic3 项目搭建及打包

    Ionic3 项目搭建及打包 一、工具及环境 1、node.js 搭建项目、运行项目 2、JDK1.8 3、and...

  • Windows下安装前端环境

    下载安装运行别人的vue项目 Vue运行环境的搭建需要具备的东西 node.js环境:npm包管理器(必须) cn...

  • vue基础(创建运行项目)

    一.环境搭建(略) 二.新建项目 1.全局安装vue-cli 运行命令 npm install vue-cli...

  • 2019-06-15

    Node.js、Vue.js 运行环境搭建记录 参考链接:Vue.js 运行环境搭建详解(基于windows的手把...

  • Vue搭建

    -- Vue 环境搭建及项目创建 -- 环境需求1、需要node.js 环境2、npm - node.js 包管理...

  • Vue.js 安装、搭建及创建

    windows环境搭建Vue开发环境 运行下载的Vue demo https://www.cnblogs.com/...

  • vue环境搭建与运行项目

    环境搭建 1.先安装node.js 2.安装淘宝镜像 3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架...

  • fabric1.2网络环境启动过程详解

    fabric运行机制及环境搭建 fabric运行机制及环境搭建环境依赖基于docker镜像的fabric1.2开发...

网友评论

      本文标题:vue项目环境搭建及运行

      本文链接:https://www.haomeiwen.com/subject/wyeziqtx.html