亲宝软件园·资讯

展开

vue-cli 脚手架

九九柒 人气:0

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

文件结构

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 
    
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并没有本质上的不同。

加载全部内容

相关教程
猜你喜欢
用户评论