❶ vuePress裡面怎麼寫vue.js代碼
2.1 新建文件夾docs
配置package.json，添加下述兩行
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}}
進入docs文件夾 創建 README.md文件
此時運行命令
npm run docs:dev
此時文件夾結構
study
+--docs
+----README.md
+--package.json
運行訪問http://localhost:8080/
image.png
結束運行 ，執行命令
npm run docs:build
然後看文件變化 多了個node_moles
docs 多了個 .vuepress文件夾
study+--docs+----.vuepress+------ dist //打包後的文件夾+----README.md+--package.json+--node_moles
我們在.vuepress 創建
config.js 文件
添加
mole.exports = {
title: 'Adroi媒體API 介面文檔', // 設置網站標題
description : 'Adroi',
base : '/v1/adroi-h5/adroiapi/',
themeConfig : {
nav : [
{ text: '介面定義', link: '/apiword' },
{ text: '介面欄位定義', link: '/api' },
{ text: '附錄：錯誤碼', link: '/error' }
],
sidebar: {
'/' : [
"/", //指的是根目錄的md文件 也就是 README.md 裡面的內容
"apiword", 根目錄創建 apiword.md文件 "api",根目錄創建 api.md文件 "error" 根目錄創建 error.md文件 ]
},
sidebarDepth : 2
}}
image.png
3）添加靜態圖片
4)添加指定樣式
添加樣式 分兩種 一種不用預編譯處理、一種使用
//不使用預編譯處理//直接在md文件底部添上<style></style>
//使用預編譯處理
首先需要安裝所需的模塊 舉例：stylus
npm i stylus stylus-loader -D<style lang="stylus"></style>
5)vuePress可添加js代碼
既然是尤大大的作品 那肯定是支持vue語法的
在MD文件中直接寫入js的語法
<script>
export default{
//...do something
}</script>
6)代碼發布或上傳至伺服器
關於發布問題：首先我們知道在打包後的文件都是靜態文件之前的MD文件都被打包成html靜態文件了,其次在文件config.js中 base至關重要
6-1發布在雲盤中如網路雲盤 github上可直接通過鏈接訪問
在雲盤上創建根目錄如vuepress，然後在config中 bese這部分就填寫/vuepress,然後進行打包操作，再然後把打包後的文件上傳至雲盤上的vuepress文件中
6-2 通過伺服器發布
在伺服器上安裝Apache或者nginx 這里拿nginx舉例：
至於nginx 安裝 以及配置文件的解讀使用 我這里就不詳述了，不了解的童鞋可以自己查閱相關文件
同樣base的填寫很重要
//為了簡單明了 我們把打包好的文件放入nginx中html文件下 之前的文件可以清空server {
listen 8081; //監聽8081埠
server_name localhost; //localhost:8081即可指向也可寫別名如local.vuepress.com.cn 那我們訪問這個埠的別名加埠就可以
location / {
root /nginx/nginx-1.9.15/html; //至關重要你的入口文件在本機的位置
index index.html index.htm; //入口文件
}
}
轉載於：https://www.jianshu.com/p/7a2cc8a7f40c
❷ .vue文件怎麼寫js代碼
單個組件裡面可以使用import $ from 'jquery' 引用
當前你得使用npm把jquery 安裝了。 把jquery 用exportdefault 導出來(就是在jquery.js的最後一行寫上 exportdefault $)， 然後使用import $ from 『jquery的文件地址』
至於 script標簽裡面怎麼寫
import$from'jquery'
exportdefault{
data:function(){
return{
testData:1//這個對象裡面定義所有的變數這些變數可以在html直接和dom綁定
}
},
mounted:function(){
//生命周期函數，有好幾個執行的順序都不一樣，可以根據場景選擇不同的生命周期函數這塊一般是初始化數據的地方
},
methods:{//這里寫所有的方法，這些方法可以在方法內部使用this.方法名調用，也可以在html中使用@時間名=『函數名()』調用
init(){
//實例方法
//使用this.變數可以訪問data中的變數
console.log(this.testData)
}
}
}