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.jsonscripts对象,执行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创建项目的更多相关文章

  1. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  2. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  3. vue/cli创建项目过程

            ①vue create demo    vue版本:3.9.3,node版本:12.8.0         ②Manually select features         ③Bab ...

  4. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  5. 初学Vue.js,用 vue ui 创建项目会不会被鄙视

    全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...

  6. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  7. Vue.之.创建项目

    Vue.之.创建项目 第一次使用vue的时候,在已完成node的情况下,还需要在进行安装vue. 指令:cnpm install vue-cli -g      //全局安装 vue-cli 检查vu ...

  8. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  9. 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 该命 ...

  10. Vue ui创建项目

    vue-cli 3.0 版本为我们提供了集 创建.管理.分析 为一体的可视化界面vue UI,一个可视化项目管理器 一.打开终端,安装最新vue-cli npm install -g @vue/cli ...

随机推荐

  1. length()方法,length属性和size()的方法的区别

    length()方法,length属性和size()的方法的区别: length()方法是针对字符串来说的,要求一个字符串的长度就要用到它的length()方法: length属性是针对Java中的数 ...

  2. ACM==迷茫

    写给迷茫的自己~~ 从家里来学校一周多了,没做几个题,也没学习新的算法,就这样迷茫地无所事事.有时我就在想我是不是真的喜欢算法?曾经自己定下的竞赛目标要置之不理吗? 我高中毕业于一个普通高中,在上大学 ...

  3. 关于C语言文件操作

    关于C语言的文件操作之前我也写过一篇博客来介绍,但是当时写的很不全面,只是简单的使用了一下 ,今天再从新学习一下. 1.文件的写 首先还是先看一个简单的例子: include<stdio.h&g ...

  4. com.alibaba.druid.sql.parser.ParserException: syntax error, QUES %, pos 80 like报错解决

    最近,把各应用的jdbc连接池统一从dbcp2改成了druid,运行时druid报sql解析错误,如下: select * from test         where 1=1         &l ...

  5. android/底层获取上下文对象

    public class ContextUtils { private static Context applicationContext = null; public static Context ...

  6. Nodejs的运行原理-libuv篇

    前言 这应该是Nodejs的运行原理的第7篇分享,这篇过后,短时间内不会再分享Nodejs的运行原理,会停更一段时间,PS:不是不更,而是会开挖新的坑,最近有在研究RPG Maker MV,区块链,云 ...

  7. 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 – ...

  8. dojo之FilteringSelect

    1.保证可视框宽度与下拉框宽度一致 forceWidth:'true' 2.控制下拉框的高度 maxHeight:'120'

  9. Java获取当前的年月

    今天,我在尝试从数据库取数据的过程中,发现页面初始化时需要给时间控件赋初值.于是,我就写了一个获取当前年月的时间工具类. 1.具体源码如下: YearAndMonth.java: /** * @Tit ...

  10. freemarker自定义标签报错(七)

    1.错误描述 六月 09, 2014 11:11:09 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...