1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题

2.命令行里运行npm install --global vue-cli

3.npm install --global webpack

安装的时候报了:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

查了下是因为 fsevent是mac osx系统的,在win或者Linux下使用了 所以会有警告,忽略即可https://segmentfault.com/q/1010000004498934

4.到你想建项目的地方打开命令行, vue init webpack-simple 【my-project-name】里面有一些选项,一路回车就可以了

5.进入到文件夹里面 继续执行npm install

6.安装 vue 路由模块 vue-router 和网络请求模块 vue-resource

npm install vue-router vue-resource --save

还有一些别的模块:

npm install vuex --save
npm install style-loader --save-dev
:
npm install css-loader --save-dev
:
npm install file-loader --save-dev

7.npm run dev

浏览器弹出这样的页面就说明大功告成啦

vue构建项目全过程的更多相关文章

  1. vue 构建项目vue-cli

    1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...

  2. vue 构建项目遇到的请求本地json问题

    在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置  根目录/static下.如项目名/static/data.json,这边 ...

  3. vue 构建项目 文件引入

    1.vue引用依赖文件.  举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...

  4. vue 构建项目遇到的问题

    1.我在打包完成后,打开index.html文件发现地址并没有携带路由. config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思 ...

  5. 关于vue构建项目的一些指令

    第一步: brew install nodejs(MAC机子下)  Windows直接官网下载对应版本node.js 第二步: 获取nodejs模块安装目录访问权限(Windows系统忽略)sudo ...

  6. Vue构建项目

    构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用we ...

  7. 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details

    今天构建vue项目执行npm install初始化后报错 run `npm audit fix` to fix them, or `npm audit` for details 出现这问题控制台会有一 ...

  8. Webpack+Vue构建项目

    第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...

  9. vue构建项目步骤

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

随机推荐

  1. Java项目怎么使用Swagger生成API文档?

    一.环境1. JAVA82. MAVEN 3.0.53. IDEA 2016.2.54. spring boot 1.4.1 <dependency> <groupId>io. ...

  2. SQL记录-小表join大表查询例子

  3. git 分支branch

    转:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137584003893 ...

  4. TestNg失败重试机制

    TestNg提供了失败重试接口IRetryAnalyzer,需要实现retry方法: package com.shunhe.testngprac.retry; import org.testng.IR ...

  5. -boot移植(十一)---代码修改---支持nandflash

    一.移植前的修改 1.1 include/configs/jz2440修改 原来的定义: 可以看出,要先定义CONFIG_CMD_NAND才能使能NANDFlash. 这个在我们文件中的82行有定义, ...

  6. 《深入理解java虚拟机》第二章 Java内存区域与内存溢出异常

    第二章 Java内存区域与内存溢出异常 2.2 运行时数据区域  

  7. SQL——Hibernate SQL增删改查

    1.查询list数据 实例:user login public String userLogin(){ Session session = HibernateSessionFactory.getSes ...

  8. asp.net mvc4 Json问题

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  9. pyqt5-键盘事件

    视频教程:https://v.qq.com/x/page/p08592bhsag.html keyPressEvent(QKeyEvent)    键盘按下时调用 keyReleaseEvent(QK ...

  10. Java EE之Struts2路径访问小结

    一.项目WEB视图结构 注释:struts.xml:最普通配置,任何无特殊配置 二.访问页面 1.访问root.jsp //方式1: http://localhost/demo/root.jsp // ...