vue 获取本地文件磁盘地址_vue 学习笔记第无弹

1. 在 webpack 中配置 .vue 组件页面的解析

1. 运行cnpm i vue -S将 vue 安装为运行依赖；

2. 运行cnpm i vue-loader vue-template-compiler -D将解析转换 vue 的包安装为开发依赖；

3. 运行cnpm i style-loader css-loader -D将解析转换 CSS 的包安装为开发依赖，因为 .vue 文件中会写 CSS 样式；

4. 在webpack.config.js中，添加如下module规则：

 1module: {
    
 2
 3    rules: [
 4
 5      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
 6
 7      { test: /\.vue$/, use: 'vue-loader' }
 8
 9    ]
10
11  }

5. 创建App.js组件页面：

 1    <template>
 2
 3      
 4
 5      <div>
 6
 7        <h1>这是APP组件 - {
    {msg}}h1>
 8
 9        <h3>我是h3h3>
10
11      div>
12
13    template>
14
15
16
17    <script>1819    // 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象2021    export default {
    2223      data() {
    2425        return {
    2627          msg: 'OK'2829        }3031      }3233    }3435    script>
36
37
38
39    <style scoped>4041    h1 {
    4243      color: red;4445    }4647    style>

6. 创建main.js入口文件：

 1    // 导入 Vue 组件
 2
 3    import Vue from 'vue'
 4
 5
 6
 7    // 导入 App组件
 8
 9    import App from './components/App.vue'
10
11
12
13    // 创建一个 Vue 实例，使用 render 函数，渲染指定的组件
14
15    var vm = new Vue({