第一步:

brew install nodejs(MAC机子下)  Windows直接官网下载对应版本node.js

第二步:

获取nodejs模块安装目录访问权限(Windows系统忽略)
sudo chmod -R 777 /usr/local/lib/node_modules/

第三步:

npm install -g cnpm --registry= https://registry.npm.taobao.org(安装淘宝镜像/或者使用自己公司代理)

第四步:

安装webpack
cnpm install webpack -g(全局安装打包机)

第五步:

安装vue脚手架
npm install vue-cli -g

第六步:

在硬盘上找一个文件夹放工程用的,在终端中进入该目录
Mac
cd 目录路径
根据模板创建项目
vue init webpack-simple 项目名字            <注意不能用中文!!!>
或者创建 vue1.0 的项目(可忽略因为现在基本是2.0猜想后面是随着迭代升级)
vue init webpack-simple#1.0 项目名字     <注意不能用中文!!!>

第八步:

安装项目依赖
一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。
npm install
(不要从国内镜像cnpm安装,会导致后面缺了很多依赖库,其实这个还是按照实际项目来一般也是可以的。)
cnpm install
安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
cnpm install vue-router  vue-resource --save(安装模块一般是中间空格隔开,)
启动项目
npm run dev/cnpm run dev

注意安装模块依赖:

cnpm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)
cnpm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)

注意:npm update vue-cli更新脚手架的版本命令和 npm update -g 更新npm版本(主要是防止低版本有时候构建项目会报错的解决方法一般也有提示)

构建好的项目骨架一般最重要的就是开发部分src下的目录,组件基本放这里面或者自己取文件夹名字也是可以的。

记住:

App.vue // 页面入口文件
main.js // 程序入口文件,加载各种公共组件
index.html // 入口页面

router下面的index.js是配置路由信息的。(单页面的title也可以这里配置

关于webpack的就自行官网API。。。谢谢!

关于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. Webpack+Vue构建项目

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

  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. vue构建项目全过程

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

  9. vue构建项目步骤

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

随机推荐

  1. MapReduce Cross 示例

    MapReduce Cross 示例 package com.bsr.cross; import java.io.IOException; import org.apache.hadoop.conf. ...

  2. Linux 中浏览网页的命令行

    Linux系统环境的WEB网站浏览器工具,常用的有w3m.Links.Lynx三个工具 第一.w3m w3m文本浏览器是基于GPL协议发布的且支持表格.颜色.SSL连接以及内链图像,因速度快而著称. ...

  3. Android进程间通信之内部类作为事件监听器

    在Android中,使用内部类能够在当前类里面发用改监听器类,由于监听器类是外部类的内部类.所以能够自由訪问外部类的全部界面组件. 下面是一个调用系统内部类实现短信发送的一个样例: SMS类: pac ...

  4. 编程算法 - n个骰子的点数(递归) 代码(C)

    n个骰子的点数(递归) 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 把n个骰子仍在地上, 全部骰子朝上一面的点数之和为s. 输入n, 打印出 ...

  5. 网页瞬间转换成桌面应用级程序(IOS/Win/Linux)

    首先下载node,并且安装. 安装检测 检测完成后,执行下面这条命令 npm i -g nativefier 安装完成后 执行下面的命令+网址即可生成任意的桌面级程序 示例:nativefier &q ...

  6. linux系统编程:线程同步-信号量(semaphore)

    线程同步-信号量(semaphore) 生产者与消费者问题再思考 在实际生活中,仅仅要有商品.消费者就能够消费,这没问题. 但生产者的生产并非无限的.比如,仓库是有限的,原材料是有限的,生产指标受消费 ...

  7. 【bzoj4590】[Shoi2015]自动刷题机

    因为解一定是单调的,n越小切的题越多,这是可以肯定的,那么直接二分答案 #include<algorithm> #include<iostream> #include<c ...

  8. python包格式

    1 egg和wheel 前者扩展名是.egg,后者扩展名是.whl 它们都是python的模块.后者用来替换前者. wheel是轮子的意思,就是说,有了.whl包就不需要重新再造轮子了.

  9. 【Silverlight】Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图(转)

    [Silverlight]Bing Maps学习系列(二):通过Bing Maps Silverlight Control如何显示地图 如本系列第一篇你所介绍的,开发基于Silverlight的Bin ...

  10. 转贴:CSS伪类与CSS伪元素的区别及由来具体说明

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...