element-ui和npm、webpack、vue-cli搭建Vue項目

時間  2019-11-12
標籤 element npm webpack vue cli 搭建 項目 简体版
原文   原文鏈接

1、element-ui的簡單使用

一、安裝

1. npm 安裝
　　推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。
　　npm i element-ui -Scss

2. CDNhtml

複製代碼 
目前能夠經過 unpkg.com/element-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 文件便可開始使用。
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
複製代碼

 

二、element和Vue的使用示例(NavMenu導航菜單的使用)

1. 導入須要使用的JS文件vue

複製代碼 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
複製代碼

 

2. 去element官網找到須要的組件node

複製代碼 
咱們這裏簡單的展現一下導航菜單，把須要的樣式複製到咱們的HTML頁面(這裏我只用一個樣式，就只複製那個樣式)
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">處理中心</el-menu-item>
<el-menu>
複製代碼

 

3. 定製咱們的Vuepython

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>教育網</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-menu {
            display: flex; /*彈性盒子/CSS3的一個新特性*/
            align-items: center; /*水平居中*/
            justify-content: center; /*垂直居中*/
        }
    </style>

</head>

<body>
<div id="app">
    <my_header></my_header>
    <router-view></router-view>
</div>

<template id="header">
    <div>
        <!--設置了router=true後，el-menu-item就等於router-link，index就等於to-->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
            <el-menu-item index="/">首頁</el-menu-item>
            <el-menu-item index="/course">免費課程</el-menu-item>
            <el-menu-item index="3">輕課</el-menu-item>
            <el-menu-item index="4">學位課程</el-menu-item>
            <el-menu-item index="5">智能題庫</el-menu-item>
            <el-menu-item index="6">公開課</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    let my_header = {
        // 把菜單導航設置成Vue實例的組件
        template: "#header",
        data() {
            return {
                // 默認選中
                activeIndex: '/',
            }
        }
    };

    let url = [
        {
            path: '/',
            component: {
                template: `<div><h1>這是首頁</h1></div>`
            }
        },
        {
            path: '/course',
            component: {
                template: `<div><h1>免費課程頁面</h1></div>`
            }
        },

    ];

    let router = new VueRouter({
       routes: url
    });

    const app = new Vue({
        el: "#app",
        router: router,
        components: {
            my_header: my_header
        },
    })
</script>

</body>
</html>
View Code

 

2、Node.js和npm

一、什麼是Node.js和npm

複製代碼 
Node.js是一個Javascript運行環境(runtime environment)，實質是對Chrome V8引擎進行了封裝。
Node.js不是一個 JavaScript 框架，不一樣於CakePHP、Django、Rails。Node.js 更不是瀏覽器端的庫，不能與 jQuery、ExtJS 相提並論。
Node.js 是一個讓 JavaScript 運行在服務端的開發平臺，它讓 JavaScript 成爲與PHP、Python、Perl、Ruby 等服務端語言分庭抗禮的腳本語言。

而npm是Node.js的包管理工具。

好吧，類比一下python：
Node.js就是你的python解釋器。
npm就等於python解釋器的pip，用於管理(安裝，卸載)包的工具。

Node.js有它本身的語法，咱們這裏安裝Node.js主要是爲了使用它的npm，方便咱們搭建Vue項目，至於它的語法，有興趣的可自行研究。
注意：node.js和python解釋器同樣，須要本身到官網去下載並安裝。
複製代碼

 

二、npm介紹和經常使用指令

1. npm的安裝和更新jquery

複製代碼 
下載安裝Node.js後自帶包管理工具npm。

查看安裝版本信息：

　　--  node -v  查看Node.js 版本信息

　　--  npm -v  查看npm版本信息

更新npm到指定版本：

　　--  npm install npm@5.3.0 -g

　　-- npm install npm@latest -g 更新最新的穩定版本

命令參數(S、D、g)：
npm install module_name -S    即    npm install module_name –save    下載到dependencies(生產環境)

npm install module_name -D    即    npm install module_name –save-dev 下載到devDependencies(開發環境)

npm install module_name -g 下載到全局
模塊將被下載安裝到【全局目錄】中。
【全局目錄】經過 npm config set prefix "目錄路徑" 來設置。
好比說，當咱們使用了npm install -g express安裝了express框架後， 咱們就能夠在電腦裏的某一個文件夾下，打開控制檯，直接使用express mvc建立項目，若是不是全局安裝的會遇到 「'express' 不是內部或外部命令，也不是可運行的程序」錯誤。

npm install module_name 本地安裝,將模塊下載到當前命令行所在目錄(將安裝包放在：命令行所在目錄/node_modules 下)
複製代碼

 

2. npm 經常使用操做webpack

複製代碼 
以前咱們用JQuery或者Bootstrap用cdn 或者直接手動下載並放入項目，並且要管理版本。
有了npm，咱們管理本身的依賴包以及版本更加簡單。

到本身項目目錄下，進行如下命令：

　　-- npm init -y    輸入-y使用默認配置項 生成package.json文件。

　　-- npm i jquery@0.0.0   簡寫i是install的簡寫 下載依賴  不寫@ 默認最新版本

　　-- npm uninstall jquery  卸載依賴包

　　-- npm update jquery   更新依賴包

　　-- npm list  列出已安裝的依賴

　　-- npm install webpack --D 保存爲開發環境依賴

　　-- 老版本須要 --save 參數 如今不須要了

咱們的項目目錄下會生成一個 node_modules 目錄，咱們用npm下的包會在這個目錄下。
咱們全部的依賴信息放在package.json文件中，包括咱們全部的依賴以及版本。
若是咱們刪掉 node_modules目錄，可使用 npm i  來下載全部依賴。
複製代碼

 

3. npm 經常使用配置項web

複製代碼 
當咱們用npm init 的時候用了參數 -y，若是不用-y咱們能夠進行一些配置。

在咱們的package.json文件中有不少配置項

　　-- name  項目名字 中間不能有空格只能用小寫

　　-- version  項目版本

　　-- description   項目描述信息

　　-- main  項目的入口文件

　　-- scripts 指定命令的快捷方式 npm run test     test是scripts裏的鍵名 值爲具體命令

　　-- author 做者

　　-- license  許可證

　　-- dependencies  生成環境依賴的包以及版本信息

　　-- devDependencies  開發環境的依賴
複製代碼

 

3、webpack3版本

一、webpack是什麼

webpack是一個模塊打包器
它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適
的格式以供瀏覽器使用。

 

二、安裝和配置

複製代碼 
webpack是跑在Node.js環境下的，因此肯定本身有node環境。

安裝方式：
　　-- npm install webpack -g  全局安裝(webpack3版本能夠直接使用webpack安裝)

　　-- webpack  <要打包文件>  <打包後文件>     全局這種方式進行打包

　　-- npm install webpack   在本身的項目下 npm init 後在下載webpack 這就是局部安裝

　　-- node_modules/.bin/webpack <要打包文件>  <打包後文件>   項目裏要打包文件是入口文件

　　-- 路徑太長 太煩 能夠自定義命令  在package.json 文件的 scripts下面自定義
複製代碼

 

三、entry 和 output

複製代碼 
entry 入口文件  output 出口文件
上面咱們自定義命令的時候 命令太長了，並且咱們命令太多的時候咱們須要每次都自定義多條命令

咱們能夠把命令寫在webpack.config.js文件中
module.export = {
    // 全部的入口文件
    entry: {
         home: './main.js', 
         login: './login.js',
    }, 
    // 出口文件  
    output: {
         filename: '[name].bundle.js',
         path: __dirname + '/dist',
    }       
}
// backage.json  下的scripts
scripts: {
     "pack": "node_moudles/.bin/webpack --watch"
}

//  運行命令
npm run pack
複製代碼

 

4、webpack4版本(新特性)

一、 在4版本中，webpack再也不單獨使用，須要webpack-cli

　　-- 全局安裝  npm install webpack webpack-cli -g

　　-- 局部安裝  npm install webpack webpack-cli -D

 

二、 增長了模式區分 （development, production）

webpack --mode development/production 進行模式切換

development 開發者模式 打包默認不壓縮代碼

production  生產者模式 上線時使用，壓縮代碼。 默認是這個模式

 

三、默認入口文件(入口文件需本身建立)是./src/index.js，默認輸出文件./dist/main.js

-- 當只有一個入口文件也就是src/index.js時，無需增長webpack.config.js
-- 所以打包後，別的HTML頁面只須要引入main.js便可使用

 

四、多入口以及多出口(不是必要的配置項)

// webpack.config.js配置
entry: {
    // 多入口
    a: "./src/js/index.js",
    b: "./src/js/index2.js",
}
output: {
    // 多出口
    path: path.resolve(__dirname, 'dist'),
    filename: './js/[name].bundle.js'
}
View Code

 

五、打包

1. 在webpack4中須要手動建立src文件夾，在src文件夾下，新建index.js做爲入口文件
2. 打包命令
單獨使用webpack打包
    webpack --mode development(開發模式)
    webpack --mode production(生產模式)

 

六、export/import補充

複製代碼 
0. 補充
export default 某個變量
import 變量名1 from xx 

1. my.js
let name = '明仔';
function func() {
    console.log(123);
}

const age = 18;

export {name, func}

// 每一個文件只能有一個export default，且只拋出一個值
export default age


2. index.js
import {name, func} from "./my"

// 導入export默認拋出的變量，並更名爲aaggee
import aaggee from "./my"

console.log(name);
console.log(aaggee);
func();
複製代碼

 

5、vue-cli 2版本

一、用vue-cli搭建項目

複製代碼 
0. 友情提示
vue-cli自帶webpack和vue.js,
當對象的鍵和值的變量名稱相同時，可簡寫成一個變量，
在vue-cli項目中使用npm下載的包，導入時不須要寫路徑，直接能夠導入，但必須起別名
例如：npm i vue-router
那麼：
    在main.js中使用時，只須要直接導入便可
    import VueRouter from 'vue-router'
    // 導入後須要讓vue對象使用它
    Vue.use(VueRouter)



vue-cli是官方提供的快速構建這個單頁面應用的腳手架。
根據官方文檔中的構件流程：前提是已經安裝了node.js 不然npm都用不了

1. 使用npm全局安裝vue-cli 
    npm install vue-cli -g

常見報錯以及解決辦法
錯誤一：
   報錯：npm ERR! Unexpected end of JSON input while parsing near '...ectories":{},"dist":{'
   解決辦法： npm cache clean --force

錯誤二：
   若是沒有node_moudels文件夾
      執行 npm i
      而後執行 npm run build
      而後再啓動項目
   若是在執行npm i 時候遇到第一個錯誤 按照第一個錯誤的解決辦法
錯誤三：
   webpack-dev-server 不是內部命令
   請卸載重裝
   命令
      npm uninstall vue-cli -g
      npm install vue-cli -g
2. 安裝完成後在本身的工做空間裏輸入下面命令 vue init webpack 項目名稱 輸入命令後進入安裝階段，須要用戶輸入一些信息


3. 切換到咱們的項目目錄下 
    cd 到項目目錄下
    npm run dev --> 啓動項目

4. 項目中須要使用一些.vue後綴的文件，須要下載vue.js插件
Setting --> Plugins --> 搜索vue.js並下載 --> 重啓pycharm
複製代碼

 

二、目錄結構

複製代碼 
　　-- build 打包的全部文件

　　-- config 配置文件，執行文件須要的配置信息

　　-- src 資源文件(工做目錄) 全部的組件以及全部的圖片 都在這個文件夾下

　　-- node_modules  項目的全部依賴包

　　-- static 靜態資源

　　-- package.json   依賴包的json文件

   -- index.html 單頁面應用
複製代碼

 

三、Vue搭建的單頁面項目解耦分析

複製代碼 
1. 項目中的index.html就是咱們的單頁面

2. src/main.js就是咱們這個單頁面index.html對應的js文件

3. src/App.vue就是咱們這個單頁面index.html的app做用域的組件， .vue後綴的文件都是組件的配置信息

4. main.js解析
new Vue({
    el: '#app',
    components:{App},
    template: '<App/>'
})

el: '#app' 是index.html 的<div id="app"></div>
components是註冊組件
<App/> 他就是App.vue，是組件的配置信息
根實例的template就是選擇vue根實例要加載的組件，會把index.html裏面的內容替換成加載的組件的內容
App.vue是主程序，其餘全部的.vue都是放在App.vue中，因此只須要加載App.vue就徹底能夠把其餘的東西加載出來

5. 其餘組件就放在src/components裏面，後綴使用.vue。src/assets是存放圖片的

6. .vue後綴的文件就是咱們組件的配置信息

7. 把配置信息命名拋出後，在咱們的主組件APP.vue能夠導入並使用，也就是說其餘組件都是拋出給主組件導入使用的
<template>
  <div id="app">
    <h1>這是單頁面應用的大組件App組件</h1>
    <!--子組件-->
    <my_header></my_header>
  </div>
</template>

<script>
// 導入子組件配置信息
import MyHeader from "./components/MyHeader"

export default {
  name: 'APP',
  // 在這裏定義子組件
  components: {
    my_header: MyHeader
  },
  }
</script>

<style>

</style>

8. 若是須要路由vue-router，則使用npm i vue-router下載這個js
   而後在src下面新建一個routers文件夾用於建立vue-router實例，而後拋出，main.js導入後便可使用路由

9. 在vue-cli的項目中，組件component必須解耦，也就是說component組件的配置內容都得寫在一個.vue文件中，而後拋出，導入使用
   component單數，表明只有一個組件，component: 組件名(配置信息名)
   components複數，表明有幾個組件，components: {組件名1: 配置信息名1, 組件名2: 配置信息名2}，若是組件名和配置信息名同樣，
   能夠只寫一個名字 components:{組件名1, 組件名2}
複製代碼

 

四、vue-cli配置JQuery、bootstrap

複製代碼 
1. 下載安裝
-- npm install jquery 
-- npm install bootstrap 


2. 修改build/webpack.base.conf.js
注意：vue-cli3版本中若是沒有webpack.base.conf.js，那麼手動建立一個webpack.base.conf.js
const webpack = require('webpack')
// 在module.exports裏添加插件
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery",
      // Popper: ['popper.js', 'default']
    })
],
//  *******下面是若是手動下載bootstrap用的*******
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 若是是手動下載的bootstrap須要添加這個配置
      // 'assets': path.resolve(__dirname, '../src/assets'),
      // 'jquery': 'jquery/src/jquery'
    }
  },
View Code 
 
  
3. 修改主程序的js文件 main.js
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
 
  
 
   複製代碼 
  
 
 
 
 
 
 
 
6、vue-cli 3版本
 
 
 
  
 
   複製代碼 
  
 
  
一、下載vue-cli 3.0
-- npm install @vue/cli -g 
-- 報錯 npm error  能夠運行下面命令(清理緩存)
-- npm cache clean --force && npm cache verify


2、建立項目
-- vue create 項目名稱


3、目錄結構以及配置文件
-- vue-cli3 目錄更加簡單
-- 咱們手動在項目根目錄下建立vue.config.js裏面寫vue的配置信息


四、vue-cli3 配置jQuery、bootstrap
-- 跟vue-cli2同樣的配置，手動建立一個webpack.base.conf.js 
 
  
 
   複製代碼 
  
 
 
  



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程