开始通过vsCode构建第一个vue项目！

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

第一步请参照vue官方网站，https://cn.vuejs.org/v2/guide/installation.html

vue官网上的介绍、安装和使用教程相当的详细，对于初步接触vue的新人格外友善，值得认真查看！

第二步进行安装vue-cli，一样请参照大神的网站进行搭建：https://blog.csdn.net/wulala_hei/article/details/85000530

第三步：开始使用VsCode搭建第一个vue项目

（1）因为在第二步中已经搭建好了vue所需要的环境，所以暂且不需要在vsCode中进行额外配置，所以直接开始上手！

（2）通过快捷键 Ctrl+~打开中断，输入命令行 vue init webpack yourProjectName ,其中yourProjectName为自定义项目名称

现在贴上第二步中表述的关于各个选项的意思

  • Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。

  • Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字

  • Author ()： ----作者，输入你的大名

    接下来会让用户选择：

  • Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了

    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了

  • Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。（这个其实就是官方提供的依赖文件，非常建议选上）

  • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。

    接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车

  • Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车

  • Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车

PS：建议都选择YES，特别是在 Install vue-router? (Y/n)  选项中选择N，后面会出现 ‘webpack-dev-server’不是内部或外部指令的错误。还不清楚怎么解决…………

在都选择完毕后会进入安装状态，如下

这个时候你可以稍等一会，直到出现以下界面：

到达这个地步基本算是构建完成。接下来第三步。

（3）可以通过  npm run dev  命令来进行启动项目，出现以下界面表示项目启动成功，可以进行访问网址。

访问后的页面如下：

（4）如果没有启动成功，而是出现了以下界面：

你要看看你是不是在你创建的项目目录中启动的，通过命令 dir  查看目录，cd到项目中再次进行启动就可以了。

其实人家已经给了提示了……但是我就是给忘记了……难过、摔桌子！

（4）如果不是（3）的问题，那就查看下你的端口是否被占用了，如果是端口的问题，则通过以下进行修改

以上是 开始通过vsCode构建第一个vue项目！ 的全部内容， 来源链接： utcz.com/z/376048.html

回到顶部