zoukankan      html  css  js  c++  java
  • 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相同,问题就这样愉快地解决了

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

  • 相关阅读:
    [动态规划]保存子问题的结果
    [字符串]第一个不重复的字符
    [抽象建模问题]扑克牌的顺子判断
    [算法]处理连续小段问题
    [动态规划]最长回文子串
    违法
    TCP的拥塞控制
    SpringBank 开发日志 一种简单的拦截器设计实现
    SPFILEOPENBANKDB.ORA 手动编辑产生问题
    springbank 开发日志 springbank是如何执行一个handler的requestMapping对应的方法的
  • 原文地址:https://www.cnblogs.com/jessie-xian/p/11596928.html
Copyright © 2011-2022 走看看