vue-cli 脚手架

vue脚手架

vue-cli 基于webpack。帮助我们完成了对项目的基本架构，冗余代码比较多 ，资源的浪费

1.全局安装vue的脚手架

cnpm install @vue/cli -g

2.查看版本号

vue -v

3.创建项目

1. vue create demo

   Vue CLI v4.2.2
   ? Please pick a preset: (Use arrow keys)
     default (babel, eslint)      //第一项是默认
   > Manually select features     //自定义
   

2. 选择自定义

   Vue CLI v4.2.2
   ? 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)
   >(*) Babel                       //es6转es5一些插件
    ( ) TypeScript
    ( ) Progressive Web App (PWA) Support
    (*) Router                      //路由
    (*) Vuex
    (*) CSS Pre-processors          //预处理语言
    (*) Linter / Formatter		     //规范代码书写
    ( ) Unit Testing
    ( ) E2E Testing
   

3. 是否设置历史模式的路由器

   ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
   //使用历史模式的路由器?(需要为生产环境中的索引回退进行适当的服务器设置) Y
   

4. 选择预处理语言

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

5. 选择ESLint的规范

    Pick a linter / formatter config: (Use arrow keys)
    ESLint with error prevention only
     ESLint + Airbnb config
   > ESLint + Standard config  // 选择标准规范
     ESLint + Prettier
   

6. 在什么时候结构化代码

   ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
   >(*) Lint on save          //保存时
    ( ) Lint and fix on commit  //提交时
   

7. 每个插件的配置项写在单独的文件夹还是package.json中

    Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
   > In dedicated config files
     In package.json         //选哪个都可以
   

8. 配置完成，下载代码

4.进入项目

cd demo

4.运行项目

npm run server

5.编译打包

npm run build  //编译打包   线上环境

文件结构

node_modules :项目所依赖的安装包
public ：项目当中的页面
       <noscript>
          <strong>We're sorry but one doesn't work  properly without JavaScript enabled. Please enable it to continue.</strong>
       </noscript>
//页面不支持js时 输出代码
src：开发环境
    assets：存放静态资源。图片，公共样式
    component：存放组件
    router：路由的配置
    views：项目当中的页面
    store:vuex
    main.js  项目的入口文件
    APP.vue
dist：
  编译打包后的文件目录
  文件不能直接打开  引入资源用的是绝对路径 换成相对路径
  xxx.map  可以删除进一步降低体积大小

main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
  router,
  // store,
  render: h => h(App)
}).$mount('#app')

render函数

• render函数可以用js语言来构建DOM

 new Vue({
        el :"#root",
        render(createElement){
            return createElement("h5","123")
        }
    })

$mount

• $mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。

• new Vue时，el和$mount并没有本质上的不同。