Vue-CLI创建项目

vue-CLI 工程化

一、创建项目详细流程如下

# 安装脚手架 cnpm i -g @vue/cli

# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令
# 如果当前你的终端工作路径带有中文或者空格，你可以使用`cd 路径`形式进行路径切换，切换到符合要求的路径中
vue create 项目名称(创建时会自己以对应的项目名称生成目录)
## 例
vue create vue-test
# 上述命令中，可以允许变的就是`myproject`部分

以下步骤以`Vue CLI v4.5.13为例，仅供参考，在实际使用时，请以自身需求为准进行配置

• 预设选择

• 选择预设功能（根据自身项目需要选择）

• 选择Vue版本

  ? Choose a version of Vue.js that you want to start the project with 2.x
  

• 选择路由模式

• 选择css预处理器
  ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

• 选择ESlint配置（如果启用）

• 选择额外的eslint功能

• 是否独立配置

• 是否保存本次操作预设

• 本次项目

• 此过程将等待…

• 成功搭建项目如下

二、Vscode打开创建的项目

• 在命令行一定要进入本项目中

• 进入项目，打开package.json文件

• 将scripts运行脚本中的server修改为start（看个人习惯是否修改）

• 运行项目

  npm run serve

  • 如果把上图中所说到的 serve修改为start,可以通过以下方式运行项目

    npm start

——————————————————————————————————
​***“ 会不会有一天，时间真的能倒退，退回你的我的，回不去的悠悠的岁月 ”***