vue项目创建

vue项目创建

1. 打开 文件夹 对应的 终端窗口,可以 在 文件夹的地址栏输入 cmd打开

   vue init webpack vue02  # vue02 为 项目名称
   

2. 提示选择配置信息

   ? Project name (vue02)    # 项目名称, 默认回车即可
   

   ? Project description (A Vue.js project)   # 项目描述，默认回车即可
   

   ? Author   # 项目作者，默认回车即可
   

    Vue build (Use arrow keys)   # 项目打包的配置信息，
     默认回车即可
   > Runtime + Compiler: recommended for most users
     Runtime-only: about 6KB lighter min+gzip, 
     but templates (or any Vue-specific HTML) are ONLY
      allowed in .vue files - render functions are req
   uired elsewhere
   

   ? Install vue-router? (Y/n)   
   # 是否需要安装路由模块， 需要， 输入 y 即可
   

   ? Use ESLint to lint your code? (Y/n)  
   # eslint 检测代码， 不需要， 输入n 即可
   

   ? Set up unit tests？ (Y/n) 
   # 不需要， 输入n 即可
   

   ? Setup e2e tests with Nightwatch? (Y/n) 
    # 不需要， 输入n 即可
   

   ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 
    # 询问是否使用，npm包管理工具，使用上下方向键，选择第三项，然后回车即可
   > Yes, use NPM
     Yes, use Yarn
     No, I will handle that myself
   

3. 提示项目已经建成

      vue-cli · Generated "vue02".
   
   # Project initialization finished!
   # ========================
   
   To get started:
   
     cd vue02
     npm install (or if using yarn: yarn)
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack
   

4. 进入项目文件夹下

   cd  vue02
   

5. 安装项目必备包

   cnpm install     # 提示 √ All packages installed  即可
   

6. 启动项目， 在浏览器访问

   cnpm  run  dev  # 提示 I  Your application is running here: http://localhost:8080，  即可
   

7. 在浏览器访地址栏 输入 http://localhost:8080, 即可访问 vue项目

单页面组件创建以及路由配置

component：组件

template： 模板

router: 路由

export: 导出

项目已经创建，也用编辑器打开项目

1. 在文件夹src/components/，新建Index单页面组件,文件后缀名为.vue

   <template>
   <!-- template: 模板， 存放HTML标签   -->
     	<p>这是首页</p>
   </template>
   
   <script>
     // JS代码
       export default {
           name: "Index"
       }
   </script>
   
   <style scoped>
   /* CSS 样式   scoped属性限制样式只在当前组件有效， 样式不需要，可以不写 */
     
   </style>
   

   单页面组件中， style样式可以不写， 但是 前两部分必须要有

2. 修改文件src/router/index.js，添加路由信息

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from '@/components/HelloWorld'
   // 1. 导入自定义组件，组件名可以自定义
   import Index from '@/components/Index'
   
   Vue.use(Router)
   
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'HelloWorld',
         component: HelloWorld
       },
       //2. 在routers 数组中添加对应的路由对象
       {
         path: '/index',   // 在浏览器的哪个网址访问对应的文件， 网址可以自定义
         name: 'Index', // 路由对象的名字， 也可以自定义
         component: Index  // 导入的组件名，上下必须一样
       }
     ]
   })
   

3. 在浏览器输入htpp://localhost:8080/#/ + 自定义网址, 也就是``htpp://localhost:8080/#/index`