【vue】脚手架的搭建项目

vue-cli:

1. 脚手架安装指令：npm install -g @vue/cli  ---全局安装，只需要装一次

    可以通过 vue -V查看版本

2.通过脚手架搭建项目

    vue create 项目名称（英文小写）

        1) > Manually select features --手动配置

            >  (*) Babel

                (*) Router

                (*) Vuex

                (*) CSS Pre-processors

        2）vue2.x

        3) Use history mode for router? N

        4) ? Pick a CSS pre-processor      选  Less

        5)? Where do you prefer placing config for Babel, ESLint, etc.?  选   In package.json

关于vue项目目录：

    1. node_modules: 安装好的各个模块，也就项目依赖包

    2. public: 静态文件

        index.html ,单页面开发的入口文件

    3.src:  项目开发源码

        assets: 放资源文件  css ，js ,less .....

        components: 组件，公共组件（最终会被别的页面级组件引入或者被更大的组件引入拼凑成大组件）

        router:配路由

        store: 状态管理

        views: 页面级组件

        App.vue:单页面项目开发所有页面的主入口vue文件

        main.js: src文件夹的入口文件

    4.package.json  : 项目构建所依赖的包

    5. vue.config.js:vue相关配置

 

    页面结构

        .vue的文件

            1. template  :视图组件，相当于html标签,它下面只能有一个根元素,也就是不能写成

                错误写法：