闲来无聊,从0搭建vue3.0cli步骤及问题经验分享。

一、建立文件夹存放项目
二、在文件夹下下载安装vue/cli(vue/cli@3.12.1也可指定版本)

输入命令:npm i @vue/cli -g

三、注意建立3.0cli+项目需要先在文件下安装webpack, 这里很关键容易遗漏,会出现报错。

输入命令:npm i webpack -g

四、建立3.0cli+项目。这里常见错误指令无效,解决方式如下,包括npm’指令无效问题也同下解决。

输入命令:vue create myproject(2.0cli建项目输入命令:vue init webpack myproject)
① 在vscode中要单独设置其属性兼容性,以管理员身份运行 
解决办法:1.查找到PowerShell,右击用管理员身份运行。
输入set-ExecutionPolicy RemoteSigned
② 使用cmd执行命令

五、下载所需插件,vuex,vue-router,echarts等项目需要的。基本没什么问题。
六、关键点安装node-sass出现报错太多,基本每次测试新建项目多数报错,根据经验最简单的来说,需要node版本和node-sass版本对应,这里的对应是指node’想安装node-sass成功的话需要这么干,并不代表已有的node-sass无法运行。可以查看具体版本对照

注意点,版本对照也只是笼统的,安装成功还是要针对到某一个版本。比如测试安装的node版本为16.16.0.在安装node-sass版本6.0.1时总是失败,安装6.0.0成功。
测试安装成功的两个版本如下,版本是对应的,不对应就可能报错。可供大家(新建项目以及老项目)参考

node版本16.16.0 可下载对应node-sass版本6.0.0,若是老项目的话,若是无法安装最新版sass-loader或是安装成功后运行报错,指定sass-loader@7.0.1版本安装。兼容老项目需要.
node版本14.18.2 对下载应node-sass版本4.14.1,若是老项目的话,若是无法安装最新sass-loader或是安装成功后运行报错,指定sass-loader@7.0.1或者sass-loader@7.3.1版本安装。兼容老项目需要.

按他的对照表,node版本18+肯定不兼容node-sass4.14.1.
按照实测只是不兼容安装,不一定不兼容运行。经验是需要积累的,大家共同进步。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 1. 安装Node.js和npm 首先需要安装Node.js和npm,可以在官网下载对应的安装包进行安装。 2. 安装Vue CLI 使用npm安装Vue CLI,命令如下: npm install -g @vue/cli 3. 创建Vue项目 使用Vue CLI创建Vue项目,命令如下: vue create my-project 4. 安装Vue 3. 在项目中安装Vue 3.,命令如下: npm install vue@next 5. 配置VS Code 在VS Code中安装Vue插件,如Vetur、Vue 3 Snippets等,可以提高开发效率。 6. 运行项目 在项目根目录下运行命令: npm run serve 即可启动开发服务器,访问http://localhost:808即可查看项目。 ### 回答2: VS Code作为一款轻巧强大的编辑器,拥有众多插件来支持Vue开发,本文将分享如何搭建Vue3.0开发环境。 1. 安装Node.js和npm 要使用Vue3.0,首先需要安装Node.js和npm。建议下载LTS版本,安装完成后确认Node.js和npm已成功安装: ``` node -v // 输出版本号 npm -v // 输出版本号 ``` 2. 安装Vue CLI 接下来需要安装Vue CLI,它是一个命令行工具用于快速创建Vue项目。安装方式: ``` npm install -g @vue/cli ``` 3. 创建Vue项目 打开命令行窗口,使用Vue CLI创建一个Vue3.0项目: ``` vue create my-project ``` 在项目创建过程中,需要选择Vue3.0: ![Vue3.0](https://cdn.jsdelivr.net/gh/pandabobo5/blog-images/img/20211017165807.png) 项目创建成功后,进入项目并启动开发服务器: ``` cd my-project npm run serve ``` 此时在浏览器中访问http://localhost:8080/,能够看到Vue欢迎界面,表示Vue3.0开发环境搭建成功。 4. 安装Vue VS Code插件 在VS Code中,可以安装Vue插件来方便开发Vue应用。打开VS Code,进入Extensions搜索并安装“Vetur”。 ![Vetur](https://cdn.jsdelivr.net/gh/pandabobo5/blog-images/img/20211017170344.png) 5. 编辑Vue文件 回到my-project目录,在src/components下创建一个HelloWorld.vue文件: ```vue <template> <div class="hello"> <h1>{{ msg }}</h1> <button @click="onClick">Click me</button> </div> </template> <script> export default { name: 'HelloWorld', data() { return { msg: 'Vue3.0 is awesome' } }, methods: { onClick() { alert('Button clicked') } } } </script> <style scoped> .hello { font-size: 2em; text-align: center; color: #42b983; } </style> ``` 在 VS Code 中双击该文件打开,可以看到Vetur提供了丰富的语法高亮和模板预览: ![Vetur](https://cdn.jsdelivr.net/gh/pandabobo5/blog-images/img/20211017171625.png) 6. 运行项目 回到命令行窗口,输入npm run serve启动开发服务器。在浏览器中访问http://localhost:8080/,可以看到HelloWorld组件已经渲染出来了。 ![HelloWorld](https://cdn.jsdelivr.net/gh/pandabobo5/blog-images/img/20211017172836.png) 以上就是如何使用VS Code搭建Vue3.0开发环境,如果您还没有使用Vue3.0,可以尝试一下新功能和改进。 ### 回答3: VSCode是一款非常流行的开源代码编辑器,支持各种不同的编程语言和开发框架。在搭建vue3.0开发环境时,使用VSCode能够极大的提升开发效率和代码质量。 1. 安装VSCode:首先需要从官网下载并安装VSCode,根据自己电脑系统的不同选择对应版本的安装包。随后启动VSCode,并打开一个全新的工作目录。 2. 安装Node.js:Vue3.0需要Node.js的支持,因此需要从官网下载并安装最新版本的Node.js。安装完成后,可以在终端输入以下命令,查看Node.js的版本信息:node -v 3. 安装Vue CLIVue CLIVue.js官方提供的快速开发工具,可以帮助我们快速搭建Vue的开发环境。在终端输入以下命令,全局安装Vue CLI:npm install -g vue-cli 4. 创建Vue3.0项目:在终端中进入到工作目录,输入以下命令创建Vue3.0项目:vue create my-project,其中my-project是项目名称,可以自己定义。随后,会提示选择要使用的特性以及安装一些依赖。 5. 启动项目:创建好项目后,可以在终端输入以下命令启动项目:npm run serve。随后,在浏览器中输入http://localhost:8080,即可打开项目页面。此时可以在VSCode中修改代码,保存后浏览器会自动刷新。 6. 安装必要的插件:为了更好的支持Vue3.0开发,需要在VSCode中安装Vue.js插件。打开VSCode的扩展面板,搜索Vue.js插件并安装。此外,也可以安装ESLint插件来支持代码规范检查和风格统一。 总之,通过以上步骤,就可以成功搭建Vue3.0的开发环境,并在VSCode中进行开发和调试了。VSCode不仅支持多种语言和框架,而且还有丰富的插件和工具,可以帮助我们更高效的进行开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值