关于vue构建项目的一些指令
第一步:
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构建项目的一些指令的更多相关文章
- vue 构建项目vue-cli
1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...
- vue 构建项目遇到的请求本地json问题
在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置 根目录/static下.如项目名/static/data.json,这边 ...
- vue 构建项目 文件引入
1.vue引用依赖文件. 举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...
- vue 构建项目遇到的问题
1.我在打包完成后,打开index.html文件发现地址并没有携带路由. config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思 ...
- Webpack+Vue构建项目
第一步:单纯的搭建出来我们的项目,并且通过webpack打包一个bundle.js然后运行起来 步骤: 1.建立项目必要的文件和文件夹(见截图) 2.配置webpack.develop.config. ...
- Vue构建项目
构建Vue项目 按照官网教程安装 //先安装脚手架 cnpm i -g vue-cli //查看项目目标列表: webpack browserify pwa 等项目模板 vue list //使用we ...
- 【记录】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 出现这问题控制台会有一 ...
- vue构建项目全过程
1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...
- vue构建项目步骤
1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...
随机推荐
- POJ 1849 Two(遍历树)
POJ 1849 Two(遍历树) http://poj.org/problem?id=1849 题意: 有一颗n个结点的带权的无向树, 在s结点放两个机器人, 这两个机器人会把树的每条边都走一遍, ...
- git fetch 和 git pull 的差别
Git中从远程的分支获取最新的版本号到本地有这样2个命令: 1. git fetch:相当于是从远程获取最新版本号到本地,不会自己主动merge git fetch origin master git ...
- hadoop(九) - hbase shell命令及Java接口
一. shell命令 1. 进入hbase命令行 ./hbase shell 2. 显示hbase中的表 list 3. 创建user表,包括info.data两个列族 create 'user' ...
- linux用户进程分析
经过实验3的介绍.我们须要来点实在的.所以将我们理解的流程用于linux系统的分析.换句话说.通过类比的方式去进行描写叙述与理解linux相关的部分. 本节的内容非常详实.并且也分析 ...
- 鸟哥的Linux私房菜-----9、vi文本处理器
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- Delphi各销售版本之间的区别
初步的区别: http://www.embarcadero.com/products/delphi/product-editions http://www.embarcadero.com/fr/pro ...
- 容器ConcurrentHashMap原理(学习)
一.概述 HashMap 是非线程安全的,在不考虑性能问题的时候,我们的解决方案有 Hashtable 或者Collections.synchronizedMap(hashMap),这两种方式基本都是 ...
- 蓝桥 ADV-230 算法提高 12-1三角形 【数学公式】
算法提高 12-1三角形 时间限制:1.0s 内存限制:256.0MB 问题描述 为二维空间中的点设计一个结构体,在此基础上为三角形设计一个结构体.分别设计独立的函数计算三角形的 ...
- Analyzing with SonarScanner for MSBuild
https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner+for+MSBuild Features The So ...
- Explicit Interface Implementation (C# Programming Guide)
https://msdn.microsoft.com/en-us/library/ms173157.aspx If a class implements two interfaces that con ...