1、电脑中必须有node.js程序为使用vue提供环境，如果没有先下载node安装包然后安装，安装node.js后就可以使用npm来安装一些插件。（原来只有安装node之后才能使用npm）
2、如何更新电脑上的vue cli版本：
①npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载掉旧版本。
②使用npm下载包，这些包的存储地址都在国外，有的时候下载速度很慢，可以使用淘宝镜像来提高速度。地址https://npm.taobao.org/命令npm install -g cnpm --registry=https://registry.npm.taobao.org，这样cnpm就装好了。
③cnpm install -g @vue/cli(这里的命令是cnpm)或yarn global add @vue/cli安装新的版本。
如果使用“npm install -g cnpm --registry=https://registry.npm.taobao.org”命令报错“Cannot read property 'resolve' of undefined”，删除node.js重新安装即可
(①使用cmd的命令行切换到想创建项目的文件夹下 需先切换到对应盘符下如 d: 再输入cd folderName②另一种可以打开对应文件夹后在地址栏输入cmd会直接打开cmd并切换到当前文件夹
![]()
image.png
image.png
)
3、使用命令 vue create projectName(项目名称)
"Update available:3.9.3"是提示有可更新的版本
image.png
4、选择 Manually select features (自己重新配置要用到的包)可以先选babel和router、vuex其他需要用到的再安装。
1.babel插件用于将项目中wepack无法识别的ES6和ES7这些更高级的js语法转换成低级语法然后把结果交给 webpack 去打包到 bundle.js 中.
2.安装TypeScript插件可以在vue项目中使用TypeScript语法来编写项目,TypeScript是对JavaScript的扩展和增强.
3.Progressive Web App (PWA) Support,选择后vue会添加对编写pwa项目的支持.pwa本质上也是网页项目,但是在使用和感官上向手机app靠拢.
4.CSS Pre-processors是css预处理器选项,当项目中需要时可以选择,同时会在下一步让你指定要使用的预处理器,分别有三种Sass/SCSS文件扩展名是.sass,Less文件扩展名是.less,Stylus文件扩展名是.styl.
5.Linter/Formatter选项用于是否使用代码检查工具,在后续选择中让你选择具体工具类型.
6.Unit Testing是站在编程人员角度对代码进行测试,E2E Testing是站在用户的角度对代码进行测试.
image.png
image.png
image.png
5、
①、为app.vue添加样式
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
#app{
width: 100%;
height: 100%;
font-size: 14px;
background:#f1f1f1;
}
</style>
②、初始化css，去除一些标签自带样式。https://meyerweb.com/eric/tools/css/reset/链接里有提供可使用的css。同时在index.html中引入存放这些内容的reset.css。同时在head标签内规定body和html长宽为100%。
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reset.css">
<title>ele-app</title>
<style>
html,
body{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but ele-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
image.png
