新建一个vue项目(补充了vue-cli4.0快速搭建一个项目【站在巨人的肩膀上并亲测】)
1.项目初始化:安装vue-cli
npm install vue-cli -g [这个命令在3.0以后废弃了]
npm install -g @vue/cli
补充:
|
2.新建一个项目
vue init webpack ”项目名称“
(一直enter就可以,或者根据自己的需要选择配置)
3.安装依赖:
npm install
4.运行项目
npm run dev
使用vue-cli4.0快速搭建一个项目(补充时间:2021-5-18)
1、前提:本地环境 nodeJs
因为vue-cli3.0要nodeJs >= 8.9(官方推荐8.11.0+),node官方地址:Node.js 中文网 (nodejs.cn)
补充:
1 | node -v //查看当前node版本 |
2、安装vue环境
1 | npm install -g @vue/cli |
补充:查看版本
1 | vue -V |
3、搭建项目
1 | vue create < Project Name> //注意:文件名不支持驼峰(含大写字母) |
例如:vue create vue-project
补充:vue-cli3.0以后项目创建的命令就变成了上面这样
问题一: |
选择是否用淘宝镜像 如果选择不使用淘宝镜像后,需要进行一系列的手动配置。 |
配置: |
①:
(本人操作选择了Manually select features) |
②:继续上一步进来的初始状态,此步骤是选择自定义配置 我的配置选择如下: |
|
③:选择上是否使用路由history router。(就是路径是都带#,建议N,否则服务器还要进行配置) |
|
④:选择css预处理器 我的选择:Sass/SCSS(with dart-sass),node-sass是自动编译实时的,dart-sass需要保存后才会生效。 补充:sass官方目前主力推dart-sass最新的特性都会在这个上面先实现。 |
|
⑤:选择ESLint代码校验规则,提供一个插件化的javascript代码检测工具,ESLint + Prettier使用较多。 |
|
⑥:选择什么时候代码校验
我的选择:Lint on save (保存就检查) |
|
⑦:如何存放配置
In dedicated config files --存放到肚里文件中 In package.json --存放到package.json中 我的选择:In package.json |
|
⑧:是否保存本次的配置,N,不记录;Y,记录需要输入保存名字 我的选择:N 不记录 |
然后就可以等待创建项目了,知道出现下图中的样子就是创建项目成功了。
4、进入项目路径下,并运行项目就可以啦!
1 2 | cd vue-project npm run serve |
5、环境配置
环境配置: (根据个人习惯和项目需求进行设置) |
test、preview、production(分别表示测试、预览、生产三种环境) |
|
第一步:修改package.json文件如下: "scripts": {
"serve": "vue-cli-service serve",
"test": "vue-cli-service build --mode test", //测试
"preview": "vue-cli-service build --mode preview", //预览
"build": "vue-cli-service build --mode production", //生产
"lint": "vue-cli-service lint"
},
|
||
第二步:在项目根目录下新建.env.test、.env.preview、.env.production文件,分别对应三个环境的配置文件。 注意:名字要与第一步中的--mode后面的名字分别对应。 测试: .env.test代码如下: NODE_ENV = "test" VUE_APP_BASE_URL="测试环境域名" 预览: .env.pre代码如下: NODE_ENV = "preview" VUE_APP_BASE_URL="预览环境域名" 生产: .env.prod代码如下: NODE_ENV = "production" VUE_APP_BASE_URL="生产环境域名" 此时,生产环境已经配置好。 |
||
第三步:打包时的根据不同命令打包不同环境的包
|
||
注意:本地环境会默认从.env.development文件中读取配置 所以记得有需要新建一个然后存放配置 我的.env.development代码如下: NODE_ENV = "development"
VUE_APP_BASE_URL="本地环境域名"
|
项目创建到此结束,接下来就可以代码开发了。
补充:
完整的vue项目:vue + vuex + vue-router + scss + es6 + vant(前端框架) + axios
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗