Use vue-cli to build the first vue project process full record

Step 1: Check whether node and npm are installed Check the command, node -v; npm -v

Step 2: Switch Taobao Mirror

$ npm get registry #查看原本镜像
$ npm config set registry http://registry.npm.taobao.org/ #修改成淘宝镜像
$ npm config set registry https://registry.npmjs.org/ #镜像还原

Step 3: Install the vue-cli scaffolding. It must be run as an administrator , otherwise the permissions will be insufficient and the installation will report an error.

Insufficient permissions and key information: npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/docsify-cli'

安装命令 npm install -g @vue/cli

Note: When installing in the terminal of macOS, you need to enter before the installation commandsudo

Step 4: Create a project in vscode

Run the following command to create the project

vue create hello-world

Press the up and down keys to select the preset and press Enter to continue running. If you choose vue2 or 3, it will automatically configure the corresponding project for you. Babel and eslint do not need to be set by yourself, and it will run automatically as soon as you press Enter.

but! Beginners still recommend choosing the last option, Manually select features , to manually select which configuration items you need.

The process is as follows

1. Choose which functions you need to install in the project. This depends on your own needs. Use the up and down keys to move, the space bar to select, and press Enter to run after selecting.

2. Select the vue version

3.Use history mode for router? //Appropriate server settings are required for index fallback in production, enter Yes or No

4.Pick a CSS pre-processor //Select css pre-processor

Sass installation requires a Ruby environment, which is processed on the server side. SCSS is a new syntax of Sass3 (fully compatible with CSS3 and inherits Sass functions) LESS
//Less will eventually output css to the browser through compilation and processing, and Less can run on the client , and can also be run on the server side (with the help of Node.js)
Stylus //Stylus is mainly used to support CSS preprocessing for Node projects. Stylus is more powerful in function and is more closely related to js. It can create robust and dynamic CSS.

5.Pick a linter / formatter config //Select a grammar detection tool

ESLint with error prevention only --- only error prevention

ESLint + Airbnb config ---Airbnb configuration

ESLint + Standard config --- standard configuration

ESLint + Prettier

6.Pick additional lint features //Choose the grammar check method, select lint on save, save and check

7.Where do you prefer placing config for Babel, ESLint, etc.? //Where is the configuration file placed

In dedicated config files // Place independent files
In package.json // Put in package.json

8.Save this as a preset for future projects? //Save this as a preset for future projects?

If it is preset, give it a name. Next time you create a project, you can use this template to create it directly. You don’t need to choose it again. Just choose the preset name in the first step. Because many functions are not familiar, choose No here, and then the project starts create

created successfully

Then just follow the command given above to run. Generally, the browser will not be opened automatically after running. You need to add --open after the start command

 "serve": "vue-cli-service serve --open",

After entering, you can see the start page of the vue project

After saving in the code, the page is automatically refreshed. Type the following code on the command line, after downloading this thing, you don’t need to manually refresh it every time

npm install webpack-dev-server

Other knowledge points:

router/ index.js

// 导入vue 和 vueRouter的包
import Vue from 'vue'
// 构造函数 VueRouter
import VueRouter from 'vue-router'

// 导入需要的组件（页面）
import loginView from '../views/login.vue'
import homeView from '../views/HomeView.vue'
import aboutView from '../views/AboutView.vue'
import tab1 from '../components/tab1.vue'
import tab2 from '../components/tab2.vue'


// Vue.use() 导入Vue是为了调用.use()函数，把vueRouter安装为vue项目的插件
Vue.use(VueRouter)


const routes = [
  {
    path: '/',
    redirect: '/login' //路由重定向
  },
  {
    path: '/login', //hash地址
    component: loginView //所对应的组件
  },
  {
    path: '/home',
    component: homeView,
    // redirect: '/home/tab1',
    // children 声明子路由规则,子路由规则一般不加斜线
    children:[
      // 如果children数组中，某个路由规则的path值为空字符串，则这条路由规则，叫做默认子路由，和重定向二选一，一样的效果
      { path: '', component: tab1 },
      { path: 'tab2', component: tab2 },
    ]
  },
  {
    path: '/about',
    component: aboutView
  }
]

// 创建路由实例对象
const router = new VueRouter({
  // routes是一个数组：定义hash地址与组件之间的对应关系
  routes
})

// 向外共享路由的实例对象
export default router

main.js

//导入vue这个包，得到vue这个构造函数
import Vue from 'vue' 
//导入App.vue这个根组件，渲染到html页面中
import App from './App.vue'
// 导入路由模块，拿到路由实例模块
import router from './router'


//创建vue的实例对象
new Vue({
  // 在vue项目中要想把路由用起来，需要挂载路由实例对象
  router,
  // 把render函数指定的组建，渲染到html页面指定区域中，用render函数指定的页面替换掉
  render: h => h(App)
}).$mount('#app')
//$mount() 指定要替换的区域，相当于初学时的el挂载器

Use vue-cli to build the first vue project process full record

Guess you like