nuxt.js bootstrapVue 官网 |
您所在的位置：网站首页 › bootstrapvue官网 › nuxt.js bootstrapVue 官网 |
nuxt.js bootstrapVue 官网
|
1、安装
确保安装了npx ```npx create-nuxt-app或者使用yarn ```yarn create nuxt-app进行选择 在集成的服务器端框架之间进行选择: None (Nuxt 默认服务器) Express Koa Hapi Feathers Micro Fastify Adonis (WIP) 选择您喜欢的 UI 框架: None (无) Bootstrap Vuetify Bulma Tailwind Element UI Ant Design Vue Buefy iView Tachyons 选择您喜欢的测试框架: None (随意添加一个) Jest AVA 选择你想要的 Nuxt 模式 (Universal or SPA) 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。 添加 EsLint 以在保存时代码规范和错误检查您的代码 我选择的bootstrap Vue 2.路由路由可以自动生成 pages/ --| user/ -----| index.vue -----| one.vue --| index.vue ```那么Nuxt.js中就会自动生成 router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'user', path: '/user', component: 'pages/user/index.vue' }, { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' } ] } ``` 3.运行项目npm run dev 4.构建项目的头部和底部 默认布局在根目录下新建layouts,里面新建default.vue
有的时候业务需求不同，可能会遇到，一个默认布局无法满足条件的情况下，可以使用自定义布局，在layouts新建blog.vue文件 blog.vue文件 ``` 我是博客布局文件 export default { };在项目中，使用中间内容，可以编译的内容，使用时 ``` 这是博客布局的测试页面 export default{ layout: 'blog' } 5.axios异步请求安装axios，命令行 npm i @nuxtjs/axios -s 接口引用 import axios from axios ```async asyncData({ app, query }) { console.log('query',app.store.state.wordpressAPIForJob); let banner = await axios(`${app.store.state.wordpressAPIForJob}/index/banner`); let news = await axios(`${app.store.state.wordpressAPIForJob}/index/news`); console.log('news',news) return { swipper: banner.data, news: news.data } }, 6.sass安装如果要使用 sass 就必须要安装 node-sass和sass-loader 。 ``````npm install --save-dev node-sass sass-loader注：sass的版本号
引用： (www.jianshu.com/p/bbe874c32…) nuxt项目打包官网：nuxt官网(www.nuxtjs.cn/guide/modul…) 第一步，在本地npm run build会在.nuxt文件夹下生成dist文件 第二步把本地的文件的.nuxt,static,pagkage.json,nuxt.config.js,这四个文件夹放到服务器目录文件下。 例如在服务器中建立的文件夹为/data/www/startWebFront路径下。 第三步用cmd进入目录文件夹，安装依赖 npm install -production 第四步，运行 npm start此时运行的是http://localhost:1818 目录以及项目文件夹
Nginx 的安装步骤比较简单，安装在windows上推荐使用压缩包的安装方式，下载地址;（选择稳定版本） 安装之后，目录结构
修改Nginx安装目录/conf/nginx.conf中的serve配置 ```#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; upstream nodenuxt { server 127.0.0.1:3000; # nuxt 项目监听PC端端口 keepalive 64; } server { listen 81; server_name www.wfaceboss.top; #charset koi8-r; #access_log logs/host.access.log main; location / { proxy_pass http://nodenuxt; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ .php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ .php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} } Nginx启动Nginx目录下打开cmd命令窗口，启动Nginx start nginx其他命令 nginx -s reload//重新载入nginx nginx -s quit //停止nginx nginx -h //查看帮助信息完成以下配置，当你打开浏览器的时候可以输入域名和端口号访问nuxt服务。 注意：如果多次修改/conf/nginx.conf文件，后重启nginx,在window可能会出现多个nginx进程服务，需要结束这些进程，然后重启可以解决。 通过上述服务可以实现用域名访问nuxt服务了，但关闭服务器上nuxt运行黑窗口时，服务就断了，我们不可能一直打开和盯着，这就需要PM2进行守护了。 PM2进程管理 pm2需要全局安装 npm install -g pm2 pm2启动nuxt项目cd到项目目录 启动 pm2 start /node_modules/nuxt/bin/nuxt.js --name 项目名称或者 pm2 start npm --name startWebFront -- run start或者 pm2 start npm --name "ninghao-nuxt" -- run start --watch 项目名称就是page.json中的名称 基本完成 |
【本文地址】
今日新闻 |
推荐新闻 |