一,安装node(脚手架)
从官网直接下载安装即可,自带npm包管理工具。https://nodejs.org/en
![在这里插入图片描述](https://img-blog.csdnimg.cn/aa0d414bf0e44a59b26a5051f37849c9.png)
安装之后在终端里查看查看node版本
node -V
![在这里插入图片描述](https://img-blog.csdnimg.cn/1c58d86b8a76409aa49e02af4acdd79a.png)
安装webpack
// 安装webpack 全局安装 在开发环境中
npm install webpack -D -g
安装vue-cli3.x以上
安装vue-cli
npm install @vue/cli@4.5.17 -g
创建工程
vue create 工程名
注意
要先在盘服中创建好文件夹,然后访问
![在这里插入图片描述](https://img-blog.csdnimg.cn/6161125f73104b1e81f2d7fddee5609d.png)
创建好之后创建工程名字然后选择最后一个,最后一个是自定义项目
![在这里插入图片描述](https://img-blog.csdnimg.cn/51cacadab1d84e09bbd99a305f717eb6.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/f4397a7e9aec4380935a0bab369a6f81.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/a66692e965a747cabaa5ad9fbef00afb.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/b874c4b2d316426394db07948a519103.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/5b54afecd26f44a7a216f9907ce5cb43.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/57ffa56820184702b5e4fd8aa0d61d3f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/c2b0a92f73e3443dbbe28778116f83c2.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/de542837e7c24a5aba2c67d58aa34b0c.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/298a2919b21e426aa199478be4342d37.png)
我就不选择Y了,我选的是N
创建项目成功之后
![在这里插入图片描述](https://img-blog.csdnimg.cn/5a115f8ae16d40dbab14470379eb6b71.png)
1.1, 配置vue.config.js
工程中此文件是没有,需要在工程的根路径下自行创建。
初始化的内容如下:
module.exports = {
configureWebpack:{
devServer:{
port:8090, // 端口
open:true, // 自动打开浏览器
// Mock数据
before(app){
}
}
}
}
1.2, vue-cli3x的目录介绍
vue.config.js里大概包括了配置 常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第 三方插件等等
因为绝大部分的配置和扩展尤大大已经做好了封装的了,我们常用的开发基本可以满足,不满足的 我们自己可以自行去扩展
webpack的配置在这个属性里修改configureWebpack(Mock也是在这里面的)
![在这里插入图片描述](https://img-blog.csdnimg.cn/6e76d6c2f2c04d44ab0f0ebd39bb8472.png)
1.3, package.json
找到这个文件package.json修改一些配置不然运行不成功
![在这里插入图片描述](https://img-blog.csdnimg.cn/910b8b6c7f424302a4b0a03731c51e81.png)
修改成这样
![在这里插入图片描述](https://img-blog.csdnimg.cn/fd7fcc5d6a69415b8e470160a6678053.png)
然后新建终端
![在这里插入图片描述](https://img-blog.csdnimg.cn/c2082e5729d842dfb0be26031c32926f.png)
然后输入:npm run serve
![在这里插入图片描述](https://img-blog.csdnimg.cn/3b253e9076a247c89e01658640cdaa28.png)
成功之后打开是这个页面
![在这里插入图片描述](https://img-blog.csdnimg.cn/4eb4257bc4754343b33d345515002e32.png)
最后
送大家一句话:现在站在什么地方不重要,重要的是往什么方向移动!!!