Vuejs实例-使用vue-cli创建项目
1,首先从官方网站下载安装Node.js,建议使用8.x版本,同时也会一并安装npm工具
2,npm安装很慢(国外服务器),所以一般推荐使用npm淘宝镜像cnpm,先安装下cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装好cnpm后,以后使用npm的地方就可以使用cnpm替代了
3.1、安装vue
npm install vue
3.2、全局安装vue-cli
cnpm install -g vue-cli
4、在任意一个盘创建一个vue文件夹方便存放,我是在D盘下创建,然后切换到这个文件夹下
5、创建一个webpack项目例如:rss2
vue init webpack rss2
6、一路回车确认,遇到选(y/n)基本上选y
到最后在D盘vue文件夹下面就会有初始化的项目rss2
7、进入项目rss2文件里
cd rss2
8、安装依赖
9、运行项目
这一行命令代表着它会去找到package.json
的scripts
对象,执行node bulid/dev-server.js
。
之后自动打开默认浏览器
使用vue-cli创建项目到此结束。
如果要终止命令行操作: ctrl+c
快速进入cmd:ctrl+shift+右键点击文件 → 选择在此处打开命令窗口。
10、项目文件配置介绍
build 和 config 是关于webpack的配置,里面包括一些server,和端口;
node_modules: 安装依赖代码库;
src : 存放源码;
static:存放第三方静态资源的,static里面的.gitkeep,如果为空,也可以提交到gitHub上面,正常情况下,是不可以提交的。
.babelrc:把es6文件编译成es5
.babelrc文件 {
"presets": ["es2015", "stage-2"],//表示预设,表示babelrc转换预先需要安装的插件
"plugins": ["transform-runtime"],//把es6的方法做转换
"comments": false //false表示转换后代码不生成注释
}
.editorconfig:编辑器的配置
.editorconfig
charset = utf-8 //编码
indent_style = space //缩进风格,基于空格做缩进
indent_size = 2 //缩进大小是2格
end_of_line = lf //换行符的风格
insert_final_newline = true //当你创建一个文件,会自动在文件末尾插入新行
trim_trailing_whitespace = true //自动移除行尾多余空格
.eslintignore 忽略语法检查的目录文件
就是忽略对build/*.js和 config/*.js
package.json :
{
"name": "demo",
"version": "1.0.0",
"description": "demoApp",
"author": "",
"private": true,
"scripts": { /*表示可以执行一些命令,例如:npm run dev会执行node build/dev-server.js,npm run build会执行node build/build.js,因此可以通过scripts配置脚本*/
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": { /*项目的依赖*/
"vue": "^2.2.2",
"vue-router": "^2.2.0"
},
"devDependencies": { //编译需要的依赖
}
}
入口文件: index.html 和 main.js
上面写vue-cli2的安装和创建
更新vue-cli3:参考 https://www.jianshu.com/p/5e13bc2eb97c
https://www.jianshu.com/p/32beaca25c0d
Vuejs实例-使用vue-cli创建项目的更多相关文章
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- vue/cli创建项目过程
①vue create demo vue版本:3.9.3,node版本:12.8.0 ②Manually select features ③Bab ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- 初学Vue.js,用 vue ui 创建项目会不会被鄙视
全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- Vue.之.创建项目
Vue.之.创建项目 第一次使用vue的时候,在已完成node的情况下,还需要在进行安装vue. 指令:cnpm install vue-cli -g //全局安装 vue-cli 检查vu ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验
1. 全局安装vue-cli yarn global add @vue/cli // 检查安装是否成功 vue -V // 3.2.2 2. 初始化 vue ui 执行命令 vue ui 2.1 该命 ...
- Vue ui创建项目
vue-cli 3.0 版本为我们提供了集 创建.管理.分析 为一体的可视化界面vue UI,一个可视化项目管理器 一.打开终端,安装最新vue-cli npm install -g @vue/cli ...
随机推荐
- length()方法,length属性和size()的方法的区别
length()方法,length属性和size()的方法的区别: length()方法是针对字符串来说的,要求一个字符串的长度就要用到它的length()方法: length属性是针对Java中的数 ...
- ACM==迷茫
写给迷茫的自己~~ 从家里来学校一周多了,没做几个题,也没学习新的算法,就这样迷茫地无所事事.有时我就在想我是不是真的喜欢算法?曾经自己定下的竞赛目标要置之不理吗? 我高中毕业于一个普通高中,在上大学 ...
- 关于C语言文件操作
关于C语言的文件操作之前我也写过一篇博客来介绍,但是当时写的很不全面,只是简单的使用了一下 ,今天再从新学习一下. 1.文件的写 首先还是先看一个简单的例子: include<stdio.h&g ...
- com.alibaba.druid.sql.parser.ParserException: syntax error, QUES %, pos 80 like报错解决
最近,把各应用的jdbc连接池统一从dbcp2改成了druid,运行时druid报sql解析错误,如下: select * from test where 1=1 &l ...
- android/底层获取上下文对象
public class ContextUtils { private static Context applicationContext = null; public static Context ...
- Nodejs的运行原理-libuv篇
前言 这应该是Nodejs的运行原理的第7篇分享,这篇过后,短时间内不会再分享Nodejs的运行原理,会停更一段时间,PS:不是不更,而是会开挖新的坑,最近有在研究RPG Maker MV,区块链,云 ...
- arm-linux-gcc: Command not found 问题解析 .
问题: sudo tar jxvf cross-2.95.3.tar.bz2 export PATH=$PATH:/usr/local/arm/2.95.3/bin 使用arm-linux-gcc – ...
- dojo之FilteringSelect
1.保证可视框宽度与下拉框宽度一致 forceWidth:'true' 2.控制下拉框的高度 maxHeight:'120'
- Java获取当前的年月
今天,我在尝试从数据库取数据的过程中,发现页面初始化时需要给时间控件赋初值.于是,我就写了一个获取当前年月的时间工具类. 1.具体源码如下: YearAndMonth.java: /** * @Tit ...
- freemarker自定义标签报错(七)
1.错误描述 六月 09, 2014 11:11:09 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...