pc_shop_site

portal

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out the documentation.

Special Directories

You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.

assets

The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.

More information about the usage of this directory in the documentation.

components

The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.

More information about the usage of this directory in the documentation.

layouts

Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.

More information about the usage of this directory in the documentation.

pages

This directory contains your application views and routes. Nuxt will read all the *.vue files inside this directory and setup Vue Router automatically.

More information about the usage of this directory in the documentation.

plugins

The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use Vue.use(), you should create a file in plugins/ and add its path to plugins in nuxt.config.js.

More information about the usage of this directory in the documentation.

static

This directory contains your static files. Each file inside this directory is mapped to /.

Example: /static/robots.txt is mapped as /robots.txt.

More information about the usage of this directory in the documentation.

store

This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.

More information about the usage of this directory in the documentation.

Docker 方案. add by Peter at 20221213.

以上为传统开发方案. 如果你遇到了 本地需要多个node环境 / 自己的项目需要新版nodejs又不想来回切 / 统一各平台开发差异 / 不想装nodejs(环境洁癖) / 甚至本机装不上nodejs 等场景, 可以考虑Docker开发方案.

1 安装Docker 并启动.自行百度/谷歌/bing

2 拉取nodejs的镜像

docker pull node:16.14.2

3 cd到本项目的根目录, 并构建镜像

docker build -t catalog_site:dev .

4 基于 步骤3构建的镜像 启动 容器

docker run -d -p 9011:9011 -v ${PWD}:/app --name catalog_site catalog_site:dev

• 后续有项目配置相关更新就重启容器即可
• 日常开发直接启动容器就能跟传统方案一样开发了(相当于跑了npm run dev)
• src目录有自动关联

注: 如果win平台跑不起来, 把${PWD}换成项目(从盘符起)的绝对路径.

注2: 如果改完代码后手动刷新浏览器也没变化, 可以考虑把Dockerfile文件里面的CHOKIDAR_USEPOLLING环境变量行首注释解开.

注3: 这个项目本身的热更新就有点毛病, 打开浏览器标签页后, 第一次更改代码能热更新, 后续就不行了. 需要手动刷新浏览器页面.

注4: 用docker方案就不要用你本机的node.js/npm来操作项目里面的命令, 如 npm i, 要用docker容器里面的npm来操作

或者直接 ./local_dev.sh

docker build 生产环境的部署文件

先删除两个目录再开始build, 否则有概率出错 .nuxt node_modules/

然后跑这两句命令

docker build -f Dockerfile.prod -t catalog_site:prod .

docker run -d -p 9011:9011 -v ${PWD}:/app --name catalog_site_prod catalog_site:prod

或者直接 ./local_build.sh

20240223 测试环境已经会自动构建