海口建网站,装潢设计图片,wordpress 视频站模板,网站是否开启gzip#x1f680; 一、安装Node环境#xff08;建议使用LTS版本#xff09;
在开始之前#xff0c;请确保您已经安装了Node.js环境。您可以从Node.js官方网站下载LTS版本#xff0c;以确保稳定性和兼容性。
中文官网下载 确认已安装 Node.js。可以在终端中运行 node -v 命令… 一、安装Node环境建议使用LTS版本
在开始之前请确保您已经安装了Node.js环境。您可以从Node.js官方网站下载LTS版本以确保稳定性和兼容性。
中文官网下载 确认已安装 Node.js。可以在终端中运行 node -v 命令来检查是否已安装。 ⚙️ 二、下载Vue和Vue CLI脚手架
打开命令行终端执行以下命令来全局安装Vue和Vue CLI
npm install -g vue vue/cli在终端中运行 vue -V 命令来检查是否已安装这里要大写的V 三、创建Vue项目 在想要创建的位置路径下打开cmd直接点击路径输入cmd即可打开当前位置的终端 在终端中进入要创建项目的目录运行以下命令创建新的项目vue create 。 vue create project-name其中 是要创建的项目名称 3.2 ️ 进入详细选择
创建过程中您将进入一个交互式的选择界面根据您的需求进行配置。
3.2.1 选择创建模式
选择Vue的创建模式Vue 2.x、Vue 3.x 或自定义。 Vue CLI v5.0.8 ? Please pick a preset: (Use arrow keys) myvuepro ([Vue 3] dart-sass, babel, router, vuex, eslint) Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features 3.2.2 ️ 选择需要支持的特性
根据项目需求选择需要支持的特性如Babel、Router、Vuex等。 Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press to select, to toggle all, to invert selection, and to proceed) () Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors () Linter / Formatter ( ) Unit Testing ( ) E2E Testing 我的配置
3.2.3 选择Vue版本
选择您希望使用的Vue版本例如2.x或3.x。 Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) 3.x 2.x 3.2.4 是否选择history路由模式
根据需求选择是否使用history路由模式这会影响路由的URL显示方式。 Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 这里的意思是问你本次项目是否采用history模式如果选择Y,需要后台配置具体看vueRouter官网解释这里我门选择 n
3.2.5 选择CSS预处理器
选择是否使用CSS预处理器如Sass、Less等。
这里的意思是问你选择哪一种CSS预处理语言我的项目中一般使用的是SCSS我选择第一个 Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) Sass/SCSS (with dart-sass) Less Stylus 3.2.6 格式化代码方式 3.2.7 代码规则检测
这里的意思是问你什么时候进行代码规则检测我一般会选择保存就检测也就是Lint on Save
3.2.8
这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪通常我们会选择放到独立位置让package.json文件干净点所以选择第一个
3.2.9 这里是问你是否记录这次配置选择选择之后会让你为这次配置起一个名字这样下次可以直接快速配置选择最后回车后就会初始化项目了
完成后如下图
3.4 打开项目文件
使用命令行进入项目目录
cd project-name3.5 ▶️ 运行项目并查看页面
运行以下命令以启动开发服务器
npm run serve在浏览器中打开显示的URL即可看到Vue应用的页面。
通过这些步骤您已经成功地使用Vue CLI创建了一个新的Vue项目根据项目需求进行了相应的配置。接下来您可以根据需要进行开发和定制。 Vue CLI的强大功能将为您的项目带来便利和效率
