Vue2.0创建一个新项目

Vue2.0创建一个新项目

一、安装脚手架

一切的一切都是需要提前安装好node哦，不会安装和配置的可以看:
Node初次安装配置&个人博客
Node初次安装配置&CSDN
win+R输入cmd 打开终端

// 在终端输入
npm install -g @vue/cli
//或者(or)
yarn global add @vue/cli

等待脚手架安装完成

二、创建项目

// 在终端输入
vue create 要创建项目的名字
//或者(or)
vue ui
//这时会弹出一个
Your connection to the default npm registry seems to be slow.
Use https://registry.npmmirror.com for faster installation? (Y/n)
//这里我们选择Y
//然后下面会弹出

? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
  
//这里是选择vue的版本，这里我们选择第三个Manually select features，键盘的方向键控制，选择好后敲击回车

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
 (*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
>(*) Router
 (*) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
//这里需要选择这些配置，键盘的方向键控制，空格键选择，全部选择好后敲击回车

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
> 2.x
//这里是让我们选择版本，我们这里选择2.x然后回车

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
//这里我们选Y,然后回车

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus
//这里我们选择默认的Sass/SCSS (with dart-sass)即可，敲击回车

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  In dedicated config files
> In package.json
//这里我们选择package.json，然后敲击回车

Save this as a preset for future projects? (y/N)
//这里是问你是否需要保存这次的配置，下次创建项目可以看到，这里我们选N,然后敲击回车
//到这里我们的项目已经常见完成，跑完以后会出现下面这些东西

🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 952 packages in 13s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 11 packages in 2s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ npm run serve
//这里我们跟着他的提示走即可，就是最下面这两行代码
 $ cd my-project
 $ npm run serve
//这里的$符不用打上哦~
//输入完上面的两行指令就会出现下面的字段，这就证明你的项目已经创建完成并且跑起来了
//复制下面的网址到浏览器即可打开 http://localhost:8080/
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.3.23:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

三、跑项目自动打开网页

这里我们需要在刚刚创建好的项目的文件夹中找到package.json这个文件打开

//找到这段代码
"scripts": {
    "serve": "vue-cli-service serve --open",//在这一行后面加上这个--oppn就可以啦
    "build": "vue-cli-service build"
},

大家也可以关注我的个人博客两边是同步的哦~