Vorwort
Weil das Unternehmen ein neues Projekt gestartet und vor einiger Zeit kurz die Verwendung von nuxt erlernt hat, es einfach zu Übungszwecken auf das Projekt angewendet und die bei der Verwendung aufgetretenen Probleme aufgezeichnet hat.
Installationshinweise
Stellen Sie zunächst sicher, dass Sie npx installiert haben (npx ist standardmäßig in NPM-Version 5.2.0 installiert), dann können Sie den Befehl ausführen
Nachdem npx create-nuxt-app <Projektname>
erstellt wurde, wird eine Reihe von Optionen angezeigt, wie unten gezeigt
1. Projektname
2. Eine Beschreibung des Projekts
3. Name des Autors
4. Wählen Sie die zu verwendende Sprache aus: Ich verwende derzeit noch Javascript, nicht TypeScript
5. Wählen Sie das js-Paketverwaltungstool aus: npm
6. Wählen Sie das UI-Framework aus: The Das UI-Framework, das wir derzeit verwenden, ist Element 7. Wählen Sie das Service- Framework aus: nuxt
wird nicht verwendet. Das Extra ist nuxt. 12. Wählen Sie das Entwicklungstool aus: Ich habe mich für vscode entschieden
Wenn alle oben genannten Inhalte ausgewählt sind, können Sie auf die automatische Installation von Abhängigkeiten warten!
Aktionsbefehle für Elemente
im Entwicklungsmodus ausführen
cd <项目名>
npm run dev
Nachdem dies aktiviert wurde, lautet die Standardadresse localhost: 3000. Wenn Sie erwarten, auf Ihr Projekt in Form einer IP-Adresse zugreifen zu können, müssen Sie nur diesen Code zur Datei package.json hinzufügen:
"nuxt": {
"host": "0.0.0.0",
"port": "你期望的端口号"
}
Bereitstellung freigeben
Wir haben uns für die serverseitige Bereitstellung von Rendering-Anwendungen entschieden und die folgenden beiden Befehle ausgeführt.
npm run build
npm start
Verzeichnisaufbau
- components: Komponentenverzeichnis (Komponenten in diesem Ordner haben keine asyncData-Methode)
- layouts: Layout-Verzeichnis (dieser Ordner erlaubt keine Umbenennung)
- Middleware: Middleware-Verzeichnis
- pages: Seitenverzeichnis (das Framework generiert Routen basierend auf allen .vue-Dateien in diesem Verzeichnis)
- plugins: Plugin-Verzeichnis (Javascript-Plugins, die vor der Instanziierung ausgeführt werden müssen)
- static: statisches Dateiverzeichnis (wird nicht kompiliert)
- store: vuex-Baumdatei zum Organisieren von Anwendungen nuxt.config.js: Konfigurationsdatei für nuxt-Anwendungen
- package.json: Wird verwendet, um Anwendungsabhängigkeiten und extern verfügbar gemachte Skriptschnittstellen zu beschreiben
Alias
~ oder @ steht für srcDir
~~ oder @@ steht für rootDir
Konfiguration in nuxt.config.js
1. Domänenübergreifende Einstellungen
proxy: {
'/api': {
target: '你的目标地址',
pathRewrite: {
'^/api' : '/'
}
}
}
2. Konfiguration mit dem sass-Präprozessor
Wenn Sie den sass-Kompilierungsstil im Projekt verwenden, stellen Sie bitte sicher, dass die entsprechenden Abhängigkeiten installiert wurden, falls nicht, führen Sie zuerst den Befehl aus
npm install node-sass sass-loader scss-loader --save-dev
// 最近总是需要在linux下面部署 记录一个在linux中安装的命令
npm install node-sass --unsafe-perm --sass_binary_site=https://npm.taobao.org/mirrors/node-sass
/**
* 全局的样式
*/
css: [
{
src: '@/assets/baseStyle.scss',
lang: 'scss'
}
]
/**
* 在.vue文件中编写
*/
<style lang='scss'>
'''
</style>
3. Konfigurieren Sie den Router
/**
* 1.将路由名称之间的分隔符改为/
* 2.为每个路由页面都设置一个中间件，进行路由跳转前的校验
*/
router:{
routeNameSplitter: '/' ,
middleware: 'user-agent'
}
4. Plug-in-Konfiguration
plugins: [
'@/plugins/element-ui',
'@/plugins/axios'
],
5. Legen Sie den Übergangseffekt für die Seitenumschaltung fest
/**
*过渡模式及效果参考vue中的介绍
*/
transition：{
name:page,
mode:'想要的过渡模式'
}
6. Legen Sie globale Metainformationen fest
head: {
title: process.env.npm_package_name || '',
meta: [
{
charset: 'utf-8' },
{
name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
link: [{
rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
}
Das Obige ist eine Einführung in die Installation, den Betrieb und die grundlegende Konfiguration. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht.