ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## 1. 创建项目 1. 安装最新版本vue ``` # 卸载旧版本 npm uninstall -g vue-cli # 安装新版本 npm install -g @vue/cli ``` 2. 创建项目 ``` vue create vuetest ``` 【选择手选】 ``` PS F:\workspace\vue\vuex> vue create vuextest Vue CLI v4.3.1 ? Please pick a preset: default (babel, eslint) > Manually select features ``` ![](https://img.kancloud.cn/b5/4e/b54e7200894009bc2fb3b531a83f6c72_584x229.png) 空格为选择,enter确认 ![](https://img.kancloud.cn/5e/55/5e55abd8e6b8a8efb43512c96dfea4aa_447x366.png) **3. 运行** ``` # 安装依赖,项目会多一个node_models目录 npm i # 运行服务 npm run serve ``` 由控制台看出,应用启动了8080端口 ``` App running at: - Local: http://localhost:8080/ - Network: http://10.10.10.60:8080/ Note that the development build is not optimized. To create a production build, run npm run build. ``` 【保存重启】 ![](https://img.kancloud.cn/6b/40/6b40949fbf471a1801f5d672ae703c01_897x167.png) 【设置使用单文件配置】 ![](https://img.kancloud.cn/ba/9c/ba9c3593cc1358270dc3dafab6fde532_845x147.png) 【保存为当前工程使用的配置,非永久】 ![](https://img.kancloud.cn/98/47/98474be30e99928b8f5d24dcc2c8a42b_701x144.png) 【回车,初始化项目】 ![](https://img.kancloud.cn/7e/43/7e43d13221f0904e315c42acea0d39de_874x159.png) ## 2. vue.config.js 应用配置 ``` module.exports = { devServer: { open:true,  // 自动打开浏览器 hot:true, // 实时打包编译 host:'0.0.0.0', inline:true,  // 表示实时刷新浏览器 port:'8020'// 指定打开浏览器的端口号   } } ``` 指定应用的为8020