vue构建项目全过程

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

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

3.npm install --global webpack

安装的时候报了:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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

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

时间: 2024-10-13 11:21:37

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

vue 构建项目 文件引入

1.vue引用依赖文件.  举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue-axios 配置模板: import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) 使用: Vue.axios.get(api).then((re

vue 构建项目vue-cli

1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue-cli脚手架,执行以下命令: $ npm install -g vue-cli 安装脚手架 $ vue init webpack demo 利用webpack生成一个模板,项目名是demo $ cd demo 进入到demo项目 $ npm install 安装依赖 $ npm run dev 运行

vue 构建项目简单流程

一: vue init webpack-simple#1.0 vue-project cd vue-project npm install npm run dev 淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org vue init webpack vue-projectvue init webpack-simple vue-project //推荐这个方法 cd vue-project cnpm install

vue构建项目步骤

1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpack 安装的时候报了: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):

总结一下最近使用vue构建项目时遇到的坑

虽然vue-cli提供了很方便的脚手架来构建自己的项目,但是在实际开发过程中,我还是遇到了一些问题,现将其摘要如下: 1.使用npm run build命令后会将我们的代码压缩至dist文件夹内,dist文件夹内目录如下: 此时直接打开index.html是无法打开的,我的解决办法是将其放在本地tomcat服务器内,然后通过启动bin/startup.bat启动服务器,即可以在浏览器正常调试. 2.打开后发现有一些图片没有显示,有一些压缩为base64,一些没有被压缩,检查后发现是图片文件过大,

用vue构建项目同一局域网下通过ip访问

在webpack配置文件下改为 host:'0.0.0.0' 改为后启动跳转不到登录页面 需手动修改浏览器上的0.0.0.0:8080为自己ip加上:8080 就可以在别的电脑上进行访问了 举一反三: 严格说来,0.0.0.0已经不是一个真正意义上的IP地址了.它表示的是这样一个集合:所有不清楚的主机和目的网络.这里的"不清楚"是指在本机的路由 表里没有特定条目指明如何到达.对本机来说,它就是一个"收容所",所有不认识的"三无"人员,一 律送进去

【vue】vue-cli3构建项目中实现图片懒加载

前两天正好写了文章如何用实现图片懒加载[性能优化]JS实现图片懒加载,今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要,本想把前两天的代码直接copy过来的,后来想查查看有没有更简便的方法,果不其然,vue中直接有插件可以使用,看了下实现时候的效果,实现原理都和原生js是一样的,vue果然真香! 接下来我们来讲vue-lazyload插件的使用: 1.安装插件 cnpm i vue-lazyload -S 2.入口文件main.js中配置: import Vue from 'vue

vue.js项目构建基础

这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJs安装是否成功? nodeJs安装完成,自带npm,可以检查npm是否已经安装 安装webpack. webpack是一个模块加载器兼打包工具,在vue项目中,为了更好的管理代码使用模块系统,使用webpack打包. 安装webpack  查看webpack是否安装成功? 安装 vue-cli 脚手

vue.js:搭建开发环境及构建项目

发环境的搭建 安装node.js 直接下一步就好, 注意安装的位置 Node.js官网:https://nodejs.org/en/ 验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口.输入node -v即可得到对应的Node.js版本. npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm. 输入npm -v可得到npm的版本. 注意npm的版本需要在3.0.0以上版本,所以,如果npm的版本小于3.0.0