vue组件化编码(2.1): 使用vue-cli脚手架创建第一个项目

男娘i 2023-07-08 06:59 10阅读 0赞

# 1. 创建第一个vue-cli项目 #

依次执行如下命令：

1.  npm install -g vue-cli
2.  vue init webpack vue\_demo
3.  cd vue\_demo
4.  npm install
5.  npm run dev  
    最后访问：http://localhost:8080/ 可以看到运行结果。

# 2. 项目目录 #

# 3. Hello Word #

1.  创建HelloWord.vue组件

<template>
      <div>
        <p class="msg">{
       {msg}} </p>
      </div>
    </template>
    
    <script> export default { //配置对象（与vue一致） data () { //在组件中，data必须写成函数形式 return { msg: 'Hello Word Vue Components!' } } } </script>
    
    <style> .msg { font-size: 30px; color: red; } </style>

(1). 组件是什么？组件是一个局部的功能界面，包含了要实现这个功能界面所需的所有资源，即：html/css/js。  
(2). 此处注意，data必须写成函数的形式，且必须有return。即data()\{\}。

1.  创建App.vue(根组件)

<template>
      <div>
        <img class="img" src="./assets/logo.png"/>
        <br/>
        
        <HelloWord/>
      </div>
    </template>
    
    <script> // 1.引入组件 import HelloWord from './components/HelloWord.vue' export default { // 2.将组件映射成为标签 components: { HelloWord} } </script>
    
    <style> .img { width: 200px; height: 200px; } </style>

注意引入并使用组件的方式：  
(1). 在<script>下通过import引入组件；  
(2). 通过components将组件映射成为标签；  
(3). 使用组件标签。

1.  创建入口js(main.js)

/* vue的入口js文件 */
    import Vue from 'vue' // 引入组件，简单的理解，一个vue文件就是一个vue的组件
    import App from './App'
    
    new Vue({ 
      el: '#app',
      /* 通过components:{ App }相当于components:{ App: App }配置，将组件映射成标签 */
      components: { App},
     /* 将该标签插入渲染到el所匹配的页面的块中 */
      template: '<App/>'
    })

此处先使用components，将组件映射成为标签，然后使用template将该标签插入渲染到el所匹配的页面的块中。

1.  主页面文件index.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vue_demo</title>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

1.  运行结果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 1]
2.  ***注意：运行时可能会报eslint检查错误，但是不会影响正常运行。错误如下：***  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 2]  
    如下三种解决方式：  
    (1). build文件夹下–>webpack.base.conf.js—>找到config.dev.useEslint，然后ctrl+鼠标左键点入，将useEslint: true改为useEslint: false。然后重新执行npm run dev;  
    (2). 在.eslintrc.js文件下配置忽略规则：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 3]  
    配置完成后，切记重新执行npm run dev。  
    (3). 直接在.eslintignore加入所有的js和vue文件，即加入：\*.js \*.vue。但通常不建议这样做，重新执行npm run dev。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200225152247152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200225160210443.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200225160515930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200225160941643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5,size_16,color_FFFFFF,t_70