安装Node（脚手架）

心已赠人 2023-10-15 09:29 40阅读 0赞

#### 目录 ####

*  一，安装node（脚手架）
 *   *  1.1， 配置vue.config.js
     *  1.2， vue-cli3x的目录介绍
     *  1.3， package.json
 *  最后

## 一，安装node（脚手架） ##

> 从官网直接下载安装即可，自带npm包管理工具。https://nodejs.org/en

![在这里插入图片描述][aa0d414bf0e44a59b26a5051f37849c9.png]  
`安装之后在终端里查看查看node版本`

node -V

![在这里插入图片描述][1c58d86b8a76409aa49e02af4acdd79a.png]  
`安装webpack`

//  安装webpack 全局安装 在开发环境中
    npm install webpack -D -g

`安装vue-cli3.x以上`

安装vue-cli
    npm install @vue/cli@4.5.17 -g
    创建工程
    vue create 工程名

**注意**  
`要先在盘服中创建好文件夹，然后访问`  
![在这里插入图片描述][6161125f73104b1e81f2d7fddee5609d.png]  
`创建好之后创建工程名字然后选择最后一个，最后一个是自定义项目`  
![在这里插入图片描述][51cacadab1d84e09bbd99a305f717eb6.png]  
![在这里插入图片描述][f4397a7e9aec4380935a0bab369a6f81.png]  
![在这里插入图片描述][a66692e965a747cabaa5ad9fbef00afb.png]  
![在这里插入图片描述][b874c4b2d316426394db07948a519103.png]  
![在这里插入图片描述][5b54afecd26f44a7a216f9907ce5cb43.png]  
![在这里插入图片描述][57ffa56820184702b5e4fd8aa0d61d3f.png]  
![在这里插入图片描述][c2b0a92f73e3443dbbe28778116f83c2.png]  
![在这里插入图片描述][de542837e7c24a5aba2c67d58aa34b0c.png]  
![在这里插入图片描述][298a2919b21e426aa199478be4342d37.png]  
`我就不选择Y了，我选的是N`

`创建项目成功之后`  
![在这里插入图片描述][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也是在这里面的）`

![在这里插入图片描述][6e76d6c2f2c04d44ab0f0ebd39bb8472.png]

### 1.3， package.json ###

`找到这个文件package.json修改一些配置不然运行不成功`  
![在这里插入图片描述][910b8b6c7f424302a4b0a03731c51e81.png]  
`修改成这样`  
![在这里插入图片描述][fd7fcc5d6a69415b8e470160a6678053.png]

`然后新建终端`  
![在这里插入图片描述][c2082e5729d842dfb0be26031c32926f.png]  
`然后输入：npm run serve`  
![在这里插入图片描述][3b253e9076a247c89e01658640cdaa28.png]  
`成功之后打开是这个页面`  
![在这里插入图片描述][4eb4257bc4754343b33d345515002e32.png]

## 最后 ##

`送大家一句话：现在站在什么地方不重要，重要的是往什么方向移动！！！`

[aa0d414bf0e44a59b26a5051f37849c9.png]: https://img-blog.csdnimg.cn/aa0d414bf0e44a59b26a5051f37849c9.png
[1c58d86b8a76409aa49e02af4acdd79a.png]: https://img-blog.csdnimg.cn/1c58d86b8a76409aa49e02af4acdd79a.png
[6161125f73104b1e81f2d7fddee5609d.png]: https://img-blog.csdnimg.cn/6161125f73104b1e81f2d7fddee5609d.png
[51cacadab1d84e09bbd99a305f717eb6.png]: https://img-blog.csdnimg.cn/51cacadab1d84e09bbd99a305f717eb6.png
[f4397a7e9aec4380935a0bab369a6f81.png]: https://img-blog.csdnimg.cn/f4397a7e9aec4380935a0bab369a6f81.png
[a66692e965a747cabaa5ad9fbef00afb.png]: https://img-blog.csdnimg.cn/a66692e965a747cabaa5ad9fbef00afb.png
[b874c4b2d316426394db07948a519103.png]: https://img-blog.csdnimg.cn/b874c4b2d316426394db07948a519103.png
[5b54afecd26f44a7a216f9907ce5cb43.png]: https://img-blog.csdnimg.cn/5b54afecd26f44a7a216f9907ce5cb43.png
[57ffa56820184702b5e4fd8aa0d61d3f.png]: https://img-blog.csdnimg.cn/57ffa56820184702b5e4fd8aa0d61d3f.png
[c2b0a92f73e3443dbbe28778116f83c2.png]: https://img-blog.csdnimg.cn/c2b0a92f73e3443dbbe28778116f83c2.png
[de542837e7c24a5aba2c67d58aa34b0c.png]: https://img-blog.csdnimg.cn/de542837e7c24a5aba2c67d58aa34b0c.png
[298a2919b21e426aa199478be4342d37.png]: https://img-blog.csdnimg.cn/298a2919b21e426aa199478be4342d37.png
[5a115f8ae16d40dbab14470379eb6b71.png]: https://img-blog.csdnimg.cn/5a115f8ae16d40dbab14470379eb6b71.png
[6e76d6c2f2c04d44ab0f0ebd39bb8472.png]: https://img-blog.csdnimg.cn/6e76d6c2f2c04d44ab0f0ebd39bb8472.png
[910b8b6c7f424302a4b0a03731c51e81.png]: https://img-blog.csdnimg.cn/910b8b6c7f424302a4b0a03731c51e81.png
[fd7fcc5d6a69415b8e470160a6678053.png]: https://img-blog.csdnimg.cn/fd7fcc5d6a69415b8e470160a6678053.png
[c2082e5729d842dfb0be26031c32926f.png]: https://img-blog.csdnimg.cn/c2082e5729d842dfb0be26031c32926f.png
[3b253e9076a247c89e01658640cdaa28.png]: https://img-blog.csdnimg.cn/3b253e9076a247c89e01658640cdaa28.png
[4eb4257bc4754343b33d345515002e32.png]: https://img-blog.csdnimg.cn/4eb4257bc4754343b33d345515002e32.png