精华内容
下载资源
问答
  • vue项目启动、idea启动vue项目、idea运行vue项目、以及vue项目页面跳转逻辑、跳转vue项目页面逻辑
  • vue项目启动流程

    千次阅读 2019-09-24 17:26:17
    Vue项目执行npm run dev启动项目后,开发环境首先会去找到webpack.dev.conf.js文件,这里配置了启动项目的服务,启动端口之类的: webpack.dev.conf.js下面引入了这两个文件 执行npm run dev或者npm run ...

         自Vue项目执行npm run dev启动项目后,开发环境首先会去找到webpack.dev.conf.js文件,这里配置了启动项目的服务,启动端口之类的:

    webpack.dev.conf.js下面引入了这两个文件

    执行npm run dev或者npm run start,实际是在node环境执行build/dev-server.js或者webpack.dev.conf.js,webpack.dev.conf.js会去拿到config中的端口等配置,通过express起一个服务,通过插件自动打开浏览器,加载webpack编译后放在内存的bundle。

    执行npm run build,实际上执行了build/build.js,通过webpack的一系列配置及插件,将文件打包合并压缩丑化,并创建dist目录,放置编译打包后的文件,这将是未来用在生产环境的包。

     

    webpack.base.conf文件定义了入口文件为main.js

    通过main.js找到html中id为#app的dom,挂载模板App.vue,该文件下又定义了路由入口,router.js里的配置将从这里加载进去

    config下的index文件定义了启动端口等服务配置

     然后index.html定义一个div供vue挂载

    参考:https://www.cnblogs.com/dongzhuangdian/p/9478321.html 

    展开全文
  • windows下vue项目启动步骤

    万次阅读 多人点赞 2017-05-03 14:19:36
    来回折腾终于把已经建好的vue项目启动起来,做个笔记记录下步骤备用,只针对没有任何前端项目启动经验的,可能对别人没有参考意义:   os:windows7   (1)git clone已建的vue项目(强迫症患者非要写,废话)...

    原创,转载请标注引用地址,谢谢~

     

    前后端分离项目,要做前后端联动测试,没整过前端用vue, nodejs和webpack的开发管理方式。来回折腾终于把已经建好的vue项目启动起来,做个笔记记录下步骤备用,只针对没有任何前端项目启动经验的,可能对别人没有参考意义:

     

    os:windows7

     

    (1)git clone已建的vue项目(强迫症患者非要写,废话)

    (2)装好nodejs,最新版本6.10以上的好像都能自动配置路径和npm啥的,反正装好后在任意路径下用cmd查"node --version"或者"npm -v"都能给出版本号,不用像一些其他教程一样还要配置环境变量。个人偏好者另说。

    (3)切换npm镜像:在任意路径下用cmd输入“npm install -g cnpm --registry=https://registry.npm.taobao.org” 这样就能用淘宝的npm镜像代替国外的资源,懒得用代理同学的福音。以后就可以用cnpm命令来全部代替npm。不设置代理的话,在后续项目的npm install的时候,容易因为超时而失败。有教程把这条命令的“--registry”写成只有一个“-”,注意是两个“--”。

    (4)npm全局安装vue:仍旧在任意路径的cmd下输入“cnpm install vue-cli -g”,安装vue。成功后输入vue能出来信息。

    (5)npm项目依赖组件安装:cmd进入前端vue项目的根目录,输入命令“cnpm install”,会根据前端项目的依赖关系下载好相关的组件,存在项目目录的node_modules文件夹下。一般git库会gitignore依赖组件,也就是没有node_modules文件夹,不然太大了... 这步容易发生err,遇见了就要打回去重弄,不要掩耳盗铃,具体错误排查stackoverflow...。

    (6)npm编译:第一次运行前,要对项目进行编译,cmd进入前端vue项目的根目录,输入命令“npm run build”,此时会对根目录下的package.json对build命令的定义进行编译,一般"build" = "webpack -p"。

    (7)配置nginx:前后端分离项目一般都要解决跨域问题,上nginx吧,配好nginx安装目录/conf/nginx.conf的server模块。nginx的配置不详述。好像现在nodejs也能直接代理,但是如果用windows的同学,好像windows的nodejs不支持process.argv[...],nginx欢迎你回归(话说nginx在windows下表现也不太稳定,经常好好地项目又不行了,此时不管三七二十一首先重启nginx!)

    (8)配置项目主机地址:前端项目里需要有个config文件夹,里面要有host.js或者config.js文件,定义nginx转域后的主机地址+端口号(也就是nginx.conf里面server模块的server_name值+listen的端口号)。git项目拉下来没有的话自己加一个,文件内容范例(下面用${}表示nginx.conf里面server模块对应的字段值):

    const host = 'http://${server_name}:${listen}/server/';
    export {host};

    (9)配置windows的HOSTS:由于是在本机上启用前端项目,需要将127.0.0.1和nginx代理后的域名做对应。找到系统的HOSTS文件(win7系统下在C:\Windows\System32\drivers\etc里面),增加一条“127.0.0.1 ${server_name}”。否则本地启动前端项目后浏览器访问nginx代理后的域名会发生dns错误。

    (10)启动nginx

    (11)启动项目:cmd进入前端vue项目的根目录,输入命令“npm run dev”,此时会用nodejs启动这个前端的vue项目。大功告成。

     

    一个比较典型的用webpack管理的vue项目应该有如下文件和文件夹:

    config/:定义代理的域名

    dist/: 整个前端项目用webpack打包后的目标存放文件夹,里面一般有bundle.js文件

    lib/: 开发时引用的一些依赖文件,最经典的就是jquery

    node_modules/:上面介绍的用npm对项目依赖组件进行安装时就放在这个文件夹里。

    src/:自己写的源代码

    index.html:主页入口文件

    package.json和webpack.config.js:这两个文件应该是组件依赖关系和管理打包的配置文件?不太懂,反正没有是不能cnpm install、cnpm run build、cnpm run dev的。

     

    第一次配置好后,以后启动只用两步:

    (1)启动nginx

    (2)进入前端项目根目录,cmd运行npm run dev

     

     

    展开全文
  • vue项目启动步骤

    万次阅读 2018-01-23 16:47:39
    npm项目依赖组件安装:cmd进入前端vue项目的根目录,输入命令“cnpm install”,会根据前端项目的依赖关系下载好相关的组件,存在项目目录的node_modules文件夹下。一般git库会gitignore依赖组件,也就是没有node_...

    确保nodejs已经安装

    npm项目依赖组件安装:cmd进入前端vue项目的根目录,输入命令“cnpm install”,会根据前端项目的依赖关系下载好相关的组件,存在项目目录的node_modules文件夹下。一般git库会gitignore依赖组件,也就是没有node_modules文件夹,不然太大了... 这步容易发生err,遇见了就要打回去重弄,不要掩耳盗铃,具体错误排查

    npm编译:第一次运行前,要对项目进行编译,cmd进入前端vue项目的根目录,输入命令“npm run build”,此时会对根目录下的package.json对build命令的定义进行编译,一般"build" = "webpack -p"。

    启动项目:cmd进入前端vue项目的根目录,输入命令“npm run dev”,此时会用nodejs启动这个前端的vue项目。大功告成。

    展开全文
  • Vue项目启动时自动获取本机IP地址

    万次阅读 2019-01-26 15:07:08
    启动vue项目时,我们发现需要自己配置启动的ip地址,这样在多人开发便显得很不方便。 解决方案: 使用vue-cli构建项目:(其他配置类似) vue init webpack myproject 1.在当前的build目录下新建一个get-ip.js...

    前言

    在启动vue项目时,我们发现需要自己配置启动的ip地址,这样在多人开发便显得很不方便。

    解决方案:

    使用vue-cli构建项目:(其他配置类似)

    vue init webpack myproject
    

    1.在当前的build目录下新建一个get-ip.js文件用来获取本机ip地址

    // build/get-ip.js
    
    var os = require('os'), ip = '', ifaces = os.networkInterfaces() // 获取本机ip
    out:
    for (var i in ifaces) {
      for (var j in ifaces[i]) {
        var val = ifaces[i][j]
        if (val.family === 'IPv4' && val.address !== '127.0.0.1') {
          ip = val.address
          break out
        }
      }
    }
    module.exports = ip
    

    2.引入

    // webpack.dev.conf.js
    const IP = require('./get-ip')
    const HOST = process.env.HOST
    ...
    devServer: {
    	...
    	host: HOST || config.dev.host || IP
    }
    // 当HOST和config.dev.host不存在时则使用本机IP
    

    3.启动:

    npm start 
    
    展开全文
  • Vue项目启动原理及项目的创建

    万次阅读 多人点赞 2018-06-08 13:29:40
    首先看下图:一般一个初步的Vue项目创建好之后都会有这三个文件:index.html 、main.js 、App.js;1、index.html :众做周知,Vue是单页面形式开发,而这个index.html文件在其中起着特别重要的作用。所有组件(后缀名...
  • vue项目启动命令

    万次阅读 2020-02-26 13:48:48
    配置文件地址
  • vue项目启动配置

    2017-07-19 15:48:00
    2、创建vue项目 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置,默认回车即可 3、项目内配置npm $ cd my...
  • vue项目启动报错

    千次阅读 2018-06-19 10:17:26
    vue启动报‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序或批处理文件"首先删除node_modules文件夹,然后执行npm install命令,再执行npm run build,最后执行npm run dev命令,观察项目是否...
  • Vue进阶(十六):vue 项目启动原理详解

    千次阅读 多人点赞 2018-12-19 16:15:14
    一般项目创建好后会有三个文件:index.html、main.js、app.vue1、index....2、main.js:相当于java的入口函数,控制初次启动vue项目要加载的组件import Vue from 'vue' 引入vueimport App from './App' 引入App.v...
  • IntelliJ IDEA安装vue插件 如果要做vue项目开发,需要安装对应的插件。 ... 打开File -> Settings -> Plugins,输入vue,搜索。... Open,选择vue项目的文件夹,等待一会,等项目初始化完成,启动项目即
  • windows下vue项目启动步骤(转载)

    千次阅读 2018-08-14 17:43:17
    vue项目启动步骤 https://blog.csdn.net/qq_27680317/article/details/71123051
  • Vue项目启动报错整理2

    万次阅读 2017-11-24 15:20:34
    Vue项目启动报错整理 1、如若发生如下 报错: vue.esm.js?efeb:574[Vue warn]: Property or method "pics" is not defined on the instance but referenced during render. Make sure that this ...
  • 1.node启动vue项目地址一般都是http://localhost:8080 2.config->index.js 中的host:‘localhost’换成host:‘你的本机ip’就可以了 module.exports = { dev: { host: '192.168.1.100' } } ...
  • 前端vue项目启动

    千次阅读 2019-08-19 16:48:36
    (1)装好nodejs,最新版本6.10以上的好像都能自动配置路径和npm啥的,反正装好后在...(11)启动项目:cmd进入前端vue项目的根目录,输入命令“npm run dev”,此时会用nodejs启动这个前端的vue项目。大功告成。
  • vue项目启动,指定端口,锁定当前网址

    千次阅读 2020-07-29 00:02:01
    vue项目启动,指定端口,锁定当前网址
  • Vue项目启动时自动打开浏览器

    千次阅读 2020-06-27 00:10:41
    Vue项目启动时自动打开浏览器 自动打开浏览器(主要是在本地开发时用到) 一、使用open-browser-webpack-plugin cnpm i open-browser-webpack-plugin --save 安装成功后,修改下图文件 const OpenBrowserPlugin = ...
  • VUE项目启动失败:Module build failed

    千次阅读 2020-01-18 15:22:55
    VUE项目启动至98%时失败 错误如图,最近使用Vue/cli创建一个项目时npm run serve启动失败,询问了大佬,都说重新安装一下node_modules包,卸载重新安装之后任然无效,最后发现是命令错误 首先第一步rimraf node_...
  • Vue项目启动代码执行流程分析

    千次阅读 2019-03-15 13:56:27
    一般一个初步的Vue项目创建好之后都会有这三个文件:index.html 、main.js 、App.js; 1、index.html :众做周知,Vue是单页面形式开发,而这个index.html文件在其中起着特别重要的作用。所有组件(后缀名为.vue都被...
  • 以windows 系统为例,操作方法如下: 一、修改默认浏览器 设置谷歌浏览器为默认浏览器。 ... ... 3、加载好后选择 “谷歌浏览器”;...若需要Vue项目启动后自动打开浏览器展示页面,还需要打开config文件
  • 基本概念 vue-cli:A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。 官网:... ...一个比较典型的用webpack管理的vue项目应该有如下文...
  • Vue项目启动问题

    千次阅读 2017-07-28 21:27:18
    $ npm install npm ERR! code EINTEGRITY npm ERR! sha1-VNjrx5SfGngQkItgAsaEFSbJnVo= integrity checksum failed when using ...
  • VS Code下VUE项目启动

    千次阅读 2019-01-28 17:03:09
    首先VUE的插件要安装的 ESLint、Vetur、vue 2 Snippets、 vueVSCodeSnippets等等 然后问 文件-》打开文件夹,选择你的项目目录 Ctrl+shift+Y调出控制台 ...在终端标签页,输入npm run dev,项目启动啦。。。 ...
  • vue项目启动端口号修改

    千次阅读 2020-04-25 15:04:55
    两种方法: 第一种 : 找到 package.json 文件 第二种: 找到 vue.config.js 文件 修改完成
  • Vue项目启动后Error: Cannot find module ‘xxx’的解决方法
  • Vue 项目启动抛出 Syntax Error/ Unexpected token 项目启动时抛出了标识符无法识别的错误 更多精彩 更多技术博客,请移步 asing1elife’s blog 错误原因 ES6 新增了不少标识符,但浏览器大多无法直接识别,...
  • VSCode配置启动Vue项目

    万次阅读 多人点赞 2018-03-30 11:04:07
    注意:这个是1.2版本的配置,现在1.3版配置已经不是这样了 ...该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好后点击文件->首选项->设置 打开设置界面,在设置...
  • vue项目启动之后出现cannot GET /

    千次阅读 2018-10-30 17:39:35
    但是能运行成功。 我看了一下命令行--结果是没有安装scss的加载器,解析scss的loder ...具体的请见---------在vue中使用sass的配置的方法https://blog.csdn.net/qq_31965515/article/details/81415244...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,902
精华内容 23,560
关键字:

vue项目启动地址

vue 订阅