Vue.js 网页端项目（仿今日头条）（一）

项目背景介绍

　　项目视频链接：最新 Vue.js 后台管理系统项目实战（今日头条）_哔哩哔哩_bilibili

（一）项目初始化

1.使用 vue cli 创建项目

　　打开 vs code 在命令行输入 

vue --version

　　如果出现 @vue/cli 4.5.13（这里是我自己的版本） 说明已安装；

　　否则输入安装/升级命令:

npm intall --global @vue/cli

　　至此，vue cli 脚手架已经安装完成。

 

　　输入一下命令创建项目：toutiao-publish-admin（我取的名字）

vue create toutiao-publish-admin

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
> test ([Vue 2] less, babel, router, vuex)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features  选择手动进行配置

Vue CLI v4.5.13
? 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)
>(*) Choose Vue version
 (*) Babel es6转成es5
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router 路由
 ( ) Vuex
 (*) CSS Pre-processors less sass处理工具
 ( ) Linter / Formatter 校验代码规范，教程里选了，但我闲代码操作有问题这里没选
 ( ) Unit Testing
 ( ) E2E Testing

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x  选择vue2
  3.x

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n  是否使用history模式，兼容性不太好，这里不适用

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less  选择less
  Stylus

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)   配置信息放在哪里
> In dedicated config files 专门配置文件，查看维护的时候更加方便
  In package.json

　　装包环节--------------------------------------------

　　根据命令提示

 $ cd toutiao-publish-admin
 $ npm run serve

　　项目创建成功！